// compontents/share/share.js Component({ /** * 组件的属性列表 * 分享弹窗 没怎么用 */ properties: { }, /** * 组件的初始数据 */ data: { flag: true, postId: '', imgUrl: [], featureMap: {}, title: '', ratio: '' }, /** * 组件的方法列表 */ methods: { //隐藏分享框 hidePopup: function () { this.setData({ flag: !this.data.flag }) }, //展示分享框 showPopup (postId, imgUrl, featureMap, title, ratio) { this.setData({ flag: !this.data.flag, 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) } }) } } })