小程序文档说是画布不更新了 但是还能用 所以我就把部分代码粘贴出来仅供参考
<!-- 分享 --> <view class="share" hidden="{{share}}"> <view class="share_top"> <view></view> <view class="share_name">分享</view> <view class="close1" bindtap="bindclose1"> <image src="../static/images/x1.png"></image> </view> </view> <view class="share_btn"> <button open-type="share"> <view> <view class="share_img"> <image src="../static/images/fxhy.png"></image> </view> <view class="share_con">分享给好友</view> </view> </button> <view bindtap="bindshareposter"> <view class="share_img"> <image src="../static/images/schb.png"></image> </view> <view class="share_con">生成分享海报</view> </view> </view> </view> <!-- 海报 --> <view class="mark" hidden="{{hidden1}}" bindtap="bindmark"></view> <view class="poster" hidden="{{hidden1}}"> <canvas canvas-id="shareCanvas" style="width:604rpx;height:940rpx"></canvas> <view class="preservation"> <view class="p_btn" bindtap="bindcanvas"> 保存到相册 </view> </view> </view>
/* 海报 */ .poster { width: 604rpx; position: fixed; left: 73rpx; top: 40rpx; height: 1090rpx; z-index: 101; } .preservation { width: 604rpx; background: #FFFFFF; opacity: 1; padding: 20rpx 30rpx 40rpx; box-sizing: border-box; border-radius: 0 0 8rpx 8rpx; } .p_btn { width: 524rpx; height: 90rpx; line-height: 90rpx; text-align: center; font-size: 28rpx; color: #FFFFFF; background: #FFD03A; opacity: 1; border-radius: 45rpx; } .fx_img { width: 42rpx; height: 42rpx; flex-shrink: 0; } .fx_img image { width: 100%; height: 100%; display: block; }
bingshare(){ this.setData({ share:false }) }, bindclose1(){ this.setData({ share:true }) }, // 分享海报 bindshareposter() { this.setData({ hidden1: false, share: true }) this.createQrCode() }, bindmark() { this.setData({ hidden1: true, }) }, // 获取二维码 createQrCode() { const that = this; let qrcode = that.data.baseUrl + that.data.goodsdInfo.qrcode; let img = that.data.baseUrl + that.data.goodsdInfo.poster_image; let p1 = new Promise((resolve, reject) => { console.log(qrcode) wx.getImageInfo({ src: qrcode, success(res) { console.log(res) resolve(res.path) }, fail(res) { console.log(res) } }) }) let p2 = new Promise((resolve, reject) => { wx.getImageInfo({ src: img, success(res) { console.log(res) resolve(res.path) }, fail(res) { console.log(res) } }) }) Promise.all([p1, p2]).then((result) => { console.log(result) that.canvas(result[0], result[1]) //['成功了', 'success'] }).catch((error) => { console.log(error) }) }, // 画布 canvas(qrcode, bgimg) { const ctx = wx.createCanvasContext('shareCanvas'); var w = ''; var h = ''; var imgW = '';//大图宽 var imgH = '';//大图高 var shareImgW = '';//分享图片宽 var shareImgH = '';//分享图片高 var x = ''; var y = ''; var l = ''; var t1 = ''; var t2 = ''; const that = this; wx.getSystemInfo({ success: (res) => { console.log(res) w = res.windowWidth; h = res.windowHeight; imgW = w * 0.81; imgH = imgW / 0.94; shareImgW = w * 0.227; shareImgH = w * 0.227; x = imgW * 0.357; y = imgH + 15; l = imgW / 2; t1 = imgH + shareImgH + 30; t2 = imgH + shareImgH + 45; // let img = bgimg // let img1 = qrcode; // // ctx.setFillStyle('white')//填充白色 // // ctx.fillRect(0, 0, 604, 1060); // // ctx.drawImage(img, 0, 0, 302, 320); // // ctx.drawImage(img1, 108, 335, 85, 85); // ctx.setFillStyle('white')//填充白色 // ctx.fillRect(0, 0, 604, 1060); // ctx.drawImage(img, 0, 0, imgW, imgH); // ctx.drawImage(img1, x, y, shareImgW, shareImgH); // ctx.setTextAlign('center')//设置文字要垂直居中 // ctx.setFillStyle('#666666')//字体颜色 // ctx.setFontSize(10)//字体大小 // ctx.fillText("扫描二维码", l,)//字体内容和位置 // ctx.fillText("查看店铺详情", l, 455)//字体内容和位置 // ctx.draw() }, }) let img = bgimg let img1 = qrcode; // ctx.setFillStyle('white')//填充白色 // ctx.fillRect(0, 0, 604, 1060); // ctx.drawImage(img, 0, 0, 302, 320); // ctx.drawImage(img1, 108, 335, 85, 85); ctx.setFillStyle('white')//填充白色 ctx.fillRect(0, 0, 604, 1060); ctx.drawImage(img, 0, 0, imgW, imgH); ctx.drawImage(img1, x, y, shareImgW, shareImgH); ctx.setTextAlign('center')//设置文字要垂直居中 ctx.setFillStyle('#666666')//字体颜色 ctx.setFontSize(10)//字体大小 ctx.fillText("扫描二维码", l, t1)//字体内容和位置 ctx.fillText("查看商品详情", l, t2)//字体内容和位置 ctx.draw() }, // 保存 bindcanvas() { const that = this; wx.canvasToTempFilePath({ canvasId: 'shareCanvas', success: function (res) { console.log(res) wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { $.toast('保存成功!', false) console.log(res) that.setData({ hidden1: true }) }, fail(res) { console.log(res) } }) } }) },