用的是canvas绘图，
wxml
showCanvas显隐用的，cencalShowCanvas点击灰色地带会隐藏画布，catchtouchmove是让弹窗层弹出时不会被滑动从而正确触发cencalShowCanvas方法
<view catchtouchmove="{{showCanvas==false?'':true}}"> <view wx:if="{{showCanvas}}"> <view class="gray-view" bindtap="cencalShowCanvas"></view> <view class="canvas-v"> <view style="width:80%;"> <canvas canvas-id='canone' style='position: fixed;top:250rpx;width:{{canvasWidth}}px; height:{{canvasWidth+65}}px;background-color:#fff;' disable-scroll='true'> </canvas> <view class="can-btn"> <button bindtap="save" style="position: fixed;top:{{canvasWidth+205}}px;">保存图片</button> </view> </view> </view> </view> </view>wxss
.gray-view{ position: fixed; top: 0; background-color: #000; filter:alpha(Opacity=80); -moz-opacity:0.5;opacity: 0.5; height: 1600rpx; width: 100%; } .canvas-v{ display: flex; justify-content: center; } .can-btn{ display: flex; justify-content: center; } .can-btn button{ border-radius: 40rpx; width: 400rpx; height: 80rpx; line-height: 80rpx; background-color: #07ba07; color: #fff; }js(由于画布无法直接使用网络图片，所以需要wx.getImageInfo把它下载回来才能使用)
data:{ showCanvas:false, canvasWidth:0, canvasHeight:0, } onLoad(){ let that = this wx.getSystemInfo({ success: function (res) { myCanvasWidth = res.windowWidth *80/100 myCanvasHeight = res.windowHeight - 200 }, }) that.setData({ canvasWidth: myCanvasWidth, canvasHeight: myCanvasHeight }) }, cencalShowCanvas(){ this.setData({ showCanvas: false }) }, poster(){ let that = this, img = that.data.goodsList[0].img,qrcode // img = img.slice(0,4)+'s'+img.slice(4) that.cancel() that.setData({ showCanvas:true }) //网络图片地址无法用画布截取到，故使用微信获取图片信息的接口下载回来，达到设置网络图片地址 wx.getImageInfo({ src: that.data.qrcode, success(res){ qrcode=res.path } }) wx.getImageInfo({ src: img, success(res){ var ctx = wx.createCanvasContext('canone', that); ctx.setFillStyle('#fff')//这两行给画布加上白色背景，否则保存下来的图片是透明底色 ctx.fillRect(0, 0, that.data.canvasWidth, that.data.canvasWidth + 65) ctx.drawImage('../../assets/images/head.png', 0,0,that.data.canvasWidth+1,60) ctx.drawImage(res.path, 10, 65, that.data.canvasWidth - 20, that.data.canvasWidth - 120) // 二维码 ctx.drawImage('../../assets/images/canvas-foo.png', 0, that.data.canvasWidth - 70, that.data.canvasWidth + 1, 140) ctx.drawImage(qrcode, that.data.canvasWidth / 2.55, that.data.canvasWidth / 1.24, that.data.canvasWidth / 4.5, that.data.canvasWidth / 4.5) ctx.setTextAlign('center') ctx.setFillStyle('#fff') ctx.setFontSize(10) // ctx.fillText(that.data.store.storeName, that.data.canvasWidth/2,that.data.canvasWidth+45) // ctx.fillText(that.data.store.addressDetail, that.data.canvasWidth / 2, that.data.canvasWidth + 60) ctx.draw(false, () => { wx.canvasToTempFilePath({ x: 0, y: 0, canvasId: 'canone', // shareCanvas 为制定 绘图canvas 的ID success: (res) => { }, complete: (res) => { wx.hideLoading() } }) }); } }) }, //保存画布 save() { let that = this wx.canvasToTempFilePath({ canvasId: 'canone', quality: 'jpg', success(res) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function success(res) { wx.showToast({ title: '保存成功', }) that.cencalShowCanvas() }, complete: function fail(e) { } }); }, complete: function complete(e) { } })单单是做完上面的的话会出现一个bug，就是因为canvas是官方组件无法使用position: fixed;就会导致弹出的时候画布会随着屏幕的滑动而滑动。
只要给父元素加一个
<view catchtouchmove="{{show==false?'':true}}"></view>就ok了。
css
.gray-view{ position: fixed; top: 0; background-color: #000; filter:alpha(Opacity=80); -moz-opacity:0.5;opacity: 0.5; height: 1600rpx; width: 100%; } .share-view{ position: fixed; bottom: 60px; background-color:#fff; height: 300rpx; width: 100%; } .share-type{ display: flex; justify-content: space-around; } .share-type image{ width: 100rpx; height: 100rpx; } .share-type button{ width: 150rpx; height: 150rpx; line-height: 45rpx; background: transparent; font-size: 30rpx; } .share-type button::after{ border: none; } .cancel{ text-align: center; font-size: 34rpx; line-height: 65rpx; } .goods{ display: flex; justify-content: center; align-items: center; height: 60rpx; margin-top: 10rpx; }
