|
@@ -14,6 +14,10 @@ Component({
|
|
|
data: {
|
|
|
flag: true,
|
|
|
postId: '',
|
|
|
+ imgUrl: [],
|
|
|
+ featureMap: {},
|
|
|
+ title: '',
|
|
|
+ ratio: ''
|
|
|
},
|
|
|
|
|
|
/**
|
|
@@ -27,12 +31,109 @@ Component({
|
|
|
})
|
|
|
},
|
|
|
//展示分享框
|
|
|
- showPopup (postId) {
|
|
|
+ showPopup (postId, imgUrl, featureMap, title, ratio) {
|
|
|
this.setData({
|
|
|
flag: !this.data.flag,
|
|
|
- postId
|
|
|
+ postId,
|
|
|
+ imgUrl,
|
|
|
+ featureMap,
|
|
|
+ title,
|
|
|
+ ratio
|
|
|
})
|
|
|
},
|
|
|
+ //保存图片
|
|
|
+ saveImage (e) {
|
|
|
+ const imgUrl = this.data.imgUrl;
|
|
|
+ const ratio = this.data.ratio;
|
|
|
+ const featureMap = this.data.featureMap;
|
|
|
+ const title = this.data.title;
|
|
|
+ //获取屏幕宽度
|
|
|
+ const windowWidth = wx.getSystemInfoSync().windowWidth;
|
|
|
+ //获取图片高度
|
|
|
+ const imgHeight = windowWidth*ratio;
|
|
|
+ //先绘制图片
|
|
|
+ for (let item of imgUrl) {
|
|
|
+ // wx.downloadFile({
|
|
|
+ // url: item,
|
|
|
+ // success: function (res) {
|
|
|
+ // console.log(res);
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ //canvas绘制文字和图片
|
|
|
+ const ctx = wx.createCanvasContext('myCanvas');
|
|
|
+ var imgPath = item;
|
|
|
+ ctx.setFillStyle('white')
|
|
|
+ ctx.fillRect(0, 0, windowWidth, imgHeight + 300)
|
|
|
+ //绘制用户上传的图片
|
|
|
+ ctx.drawImage(imgPath, 0, 0, windowWidth, imgHeight);
|
|
|
+ //绘制用户发表的内容和名字
|
|
|
+ ctx.setFontSize(16)
|
|
|
+ ctx.setFillStyle('black')
|
|
|
+ ctx.fillText(title, 135, imgHeight + 55)
|
|
|
+ ctx.setFontSize(18)
|
|
|
+ ctx.fillText(featureMap.wechatName, 135, imgHeight + 35);
|
|
|
+ //横线
|
|
|
+ ctx.moveTo(20, imgHeight + 140)
|
|
|
+ ctx.lineTo(windowWidth - 40, imgHeight + 140)
|
|
|
+ ctx.stroke()
|
|
|
+ //绘制用户头像圆形切割-开始
|
|
|
+ ctx.save();
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(70, imgHeight + 70, 50, 0, Math.PI * 2, false);
|
|
|
+ ctx.fill();
|
|
|
+ ctx.clip();
|
|
|
+ //圆形切割-结束
|
|
|
+ ctx.drawImage(featureMap.headImgUrl, 20, imgHeight + 20, 100, 100);
|
|
|
+ ctx.restore();
|
|
|
+ //二维码和文字
|
|
|
+ ctx.setFontSize(16)
|
|
|
+ ctx.setFillStyle('black')
|
|
|
+ ctx.fillText('长按二维码', 50, imgHeight + 180)
|
|
|
+ ctx.fillText('进入小程序查看更多', 50, imgHeight + 210)
|
|
|
+ ctx.draw()
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.canvasToImage()
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ canvasToImage () {
|
|
|
+ let that = this;
|
|
|
+ //canvas生成图片
|
|
|
+ wx.canvasToTempFilePath({
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ width: that.windowWidth,
|
|
|
+ height: that.imgHeight + 300,
|
|
|
+ destWidth: that.windowWidth,
|
|
|
+ destHeight: that.imgHeight + 300,
|
|
|
+ canvasId: 'myCanvas',
|
|
|
+ success: (res) => {
|
|
|
+ console.log(res.tempFilePath);
|
|
|
+ //保存图片到本地
|
|
|
+ wx.saveImageToPhotosAlbum({
|
|
|
+ filePath: res.tempFilePath,
|
|
|
+ success(res) {
|
|
|
+ wx.showModal({
|
|
|
+ title: '存图成功',
|
|
|
+ content: '图片成功保存到相册了,去发朋友圈',
|
|
|
+ showCancel:false,
|
|
|
+ confirmText:'我知道了',
|
|
|
+ confirmColor:'#72B9C3',
|
|
|
+ success: function(res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ console.log('用户点击确定');
|
|
|
+ }
|
|
|
+ //that.hideShareImg()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail:function (res) {
|
|
|
+ console.log(res)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
})
|