小程序分享朋友圈

1、在HTML页面写上

<view class="mask_hb" wx:if="{{haibao}}"></view>
<view class="canvas-box" hidden='{{haibao == false}}'>
<canvas class="canvas" canvas-id="mycanvas" disable-scroll catchtouchmove='{{true}}' bindlongpress="handleLongPress" />
<view class="close_hb" wx:if="{{haibao}}">
<image src="{{hostUrl}}/icon/vip_close_Pop-ups.png" catchtap='close_hb'></image>
</view>
</view>
<!-- 使用canvas将分享图片和申请0元购图片合成一张图 -->
<canvas canvas-id="canvas" style="width:400px;height:400px;position: absolute;left:-1000px;top:-1000px;"></canvas>

2、在css样式上写样式

/* 海报弹框 */

.mask_hb {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  z-index: 99;
}

.canvas-box {
  width: 0;
  height: 0;
  position: fixed;
  top: 3.9%;
  left: 6%;
  z-index: 99;
}

.canvas {
  width: 88%;
  height: 89%;
  position: fixed;
  top: 3.9%;
  left: 6%;
  z-index: 99;
}

.close_hb {
  width: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  left: 0;
  bottom: 2%;
  z-index: 99;
}

.close_hb image {
  width: 50rpx;
  height: 50rpx;
}

3、在js画canvas

 shareFriend: function() {
    var that = this
    var width
    var height
    wx.getSystemInfo({
      success(res) {
        width = res.screenWidth
        height = res.screenHeight
      }
    })
    var ctx = wx.createCanvasContext('mycanvas');
    var path_bg = '/assets/images/icon/bg.png'; //背景图片
    var path_bg2 = '/assets/images/icon/canvas_title.png';
    var path_logo = '/assets/images/icon/xuncaoji_icon.png'
    var path_partner = '/assets/images/icon/partner.png'
    var title = '"Free Buy"，自由买，免费拿'
    var inviterCode = that.data.shareData.inviterCode
    //绘制图片模板的背景图片
    ctx.drawImage(path_bg, 0, 0, 0.88 * width, 0.89 * height);
    //绘制红色背景
    ctx.drawImage(path_bg2, 0, 0, 0.885 * width, 0.224 * height);
    // 绘制标题
    ctx.setFontSize(13);
    ctx.setFillStyle('#fff');
    ctx.setTextAlign("center")
    ctx.fillText(title, 0.442 * width, 25);
    ctx.stroke();
    // 绘制中间矩形
    ctx.beginPath()
    ctx.setFillStyle('#fff')
    ctx.setShadow(0, 0, 2, '#eee')
    ctx.fillRect(0.057 * width, 0.08 * height, 0.76 * width, 0.522 * height - 2)
    ctx.closePath()
    //绘制合伙人图标
    ctx.beginPath()
    ctx.drawImage(path_partner, 0.35 * width, 44, 64, 51);
    ctx.closePath()
    // 绘制邀请码
    if (inviterCode) {
      ctx.beginPath()
      ctx.setFontSize(19);
      ctx.setFillStyle('#F85A53');
      ctx.fillText(`我的邀请码:${inviterCode}`, 0.442 * width, 120);
      ctx.stroke();
      ctx.closePath()
    }
    // 绘制最小矩形
    ctx.beginPath()
    ctx.setFillStyle('#fff')
    ctx.setShadow(0, 0, 2, '#eee')
    ctx.fillRect(0.1308 * width, 130, 0.617 * width, 0.3 * height)
    ctx.closePath()
    // 绘制商品图片
    ctx.beginPath()
    ctx.drawImage(that.data.path_img, 0.1308 * width + 7, 137, 0.617 * width - 14, 0.3 * height - 14);
    ctx.closePath()
    // 绘制已抢数量
    ctx.beginPath()
    var number = `已抢数量：${that.data.shareData.grabbed}`
    var textWidth = inviterCode ? ctx.measureText(number).width : ctx.measureText(number).width + 50
    ctx.setFillStyle('#F5BA2C');
    ctx.moveTo(0.1308 * width, 174)
    ctx.lineTo(0.1308 * width, 180)
    ctx.lineTo(0.1308 * width - 10, 174)
    ctx.lineTo(0.1308 * width - 10, 150)
    ctx.lineTo(0.1308 * width + textWidth / 2 + 22, 150)
    ctx.lineTo(0.1308 * width + textWidth / 2 + 22, 174)
    ctx.lineTo(0.1308 * width - 10, 174)
    ctx.arc(0.1308 * width + textWidth / 2 + 22, 162, 12, 1.5 * Math.PI, 0.5 * Math.PI, false)
    ctx.closePath()
    ctx.fill()
    ctx.beginPath()
    ctx.setFontSize(12);
    ctx.setFillStyle('#fff');
    ctx.setTextAlign("left")
    ctx.fillText(number, 0.1308 * width, 167);
    ctx.closePath()
    ctx.stroke();
    // 绘制0元购图标
    var path_zero = "/assets/images/icon/apply free.png"
    ctx.beginPath()
    ctx.drawImage(path_zero, 0.52 * width, 0.36 * height, 0.2 * width, 0.2 * width);
    ctx.closePath()
    // 绘制价格
    ctx.beginPath()
    var price = `¥${that.data.shareData.price}`
    ctx.setFontSize(16);
    ctx.setFillStyle('#F85A53');
    ctx.setTextAlign("left")
    ctx.fillText(price, 0.1308 * width, 0.525 * height - 4);
    ctx.stroke();
    ctx.closePath()
    ctx.beginPath()
    // 绘制参与返
    ctx.setFillStyle('#F85A53');
    ctx.setStrokeStyle('#F85A53')
    var textWidth = ctx.measureText(`最高返¥ ${that.data.shareData.cashBack}`).width
    var textWidth2 = ctx.measureText(price).width
    ctx.moveTo(0.1 * width + textWidth2 + 24 - 6, 0.525 * height - 8)
    ctx.lineTo(0.1 * width + textWidth2 + 24, 0.525 * height - 12)
    ctx.lineTo(0.1 * width + textWidth2 + 24, 0.525 * height - 20)
    ctx.lineTo(0.1 * width + textWidth2 + 24 + textWidth / 2 + 32, 0.525 * height - 20)
    ctx.lineTo(0.1 * width + textWidth2 + 24 + textWidth / 2 + 32, 0.525 * height + 4)
    ctx.lineTo(0.1 * width + textWidth2 + 24, 0.525 * height + 4)
    ctx.lineTo(0.1 * width + textWidth2 + 24, 0.525 * height - 2)
    ctx.lineTo(0.1 * width + textWidth2 + 24 - 6, 0.525 * height - 8)
    ctx.closePath()
    ctx.fill()
    // 绘制参与返价格
    var cashBack = `最高返¥ ${that.data.shareData.cashBack}`
    ctx.beginPath()
    ctx.setFontSize(12);
    ctx.setFillStyle('#fff');
    ctx.setTextAlign("left")
    ctx.fillText(cashBack, 0.1 * width + textWidth2 + 28, 0.525 * height - 4);
    ctx.stroke();
    ctx.closePath()
    // 绘制广告语
    ctx.beginPath()
    var adTips = '我是合伙人，上0元购，自由买免费拿，推荐此商品！'
    ctx.setFontSize(14);
    ctx.setFillStyle('#333333');
    ctx.setTextAlign("left")
    let chr = adTips.split('') // 分割为字符串数组
    let temp = ''
    let row = []
    for (let a = 0; a < chr.length; a++) {
      if (ctx.measureText(temp).width < 0.65 * width) {
        temp += chr[a]
      } else {
        a--
        row.push(temp)
        temp = ''
      }
    }
    row.push(temp)
    for (var b = 0; b < row.length; b++) {
      ctx.fillText(row[b], 0.1308 * width - 6, 0.565 * height - 4 + b * 20);
    }
    ctx.stroke();
    ctx.closePath()
    // 绘制二维码
    ctx.setShadow(0, 0, 0, '#fff')
    ctx.beginPath()
    ctx.drawImage(that.data.appletQrCodeUrl, 0.3 * width, 0.6075 * height - 2, 0.3 * width, 0.3 * width);
    ctx.closePath()
    // 绘制扫码提示
    ctx.beginPath()
    var codeTips = '长按图片识别二维码查看领取'
    ctx.setFontSize(12);
    ctx.setFillStyle('#999999');
    ctx.setTextAlign("center")
    ctx.fillText(codeTips, 0.44 * width, 0.787 * height - 2);
    ctx.stroke();
    ctx.closePath()
    ctx.draw()
    setTimeout(function() {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function(res) {
          that.data.haibaoImg = res.tempFilePath
        }
      })
    }, 1000)
    that.setData({
      showModalStatus1: false,
      haibao: true
    })
  },
  // 长按保存到相册
  handleLongPress: function() {
    var that = this
    var tempFilePath = that.data.haibaoImg
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              console.log('授权相册')
              wx.saveImageToPhotosAlbum({
                filePath: tempFilePath,
                success(res) {
                  wx.hideLoading()
                  console.log('保存图片成功回调')
                  wx.showToast({
                    title: '保存成功',
                    icon: 'none'
                  });
                  that.setData({
                    haibao: false
                  })
                },
                fail(res) {
                  wx.hideLoading()
                  console.log('保存图片失败回调')
                  console.log(res);
                }
              })
            },
            fail() {
              wx.hideLoading();
              wx.showModal({
                title: '温馨提示',
                content: '您已拒绝授权，是否去设置打开？',
                confirmText: "确认",
                cancelText: "取消",
                success: function(res) {
                  console.log(res);
                  if (res.confirm) {
                    console.log('用户点击确认')
                    wx.openSetting({
                      success: (res) => {
                        console.log(res)
                        res.authSetting = {
                          "scope.writePhotosAlbum": true,
                        }
                        console.log("openSetting: success");
                        wx.saveImageToPhotosAlbum({
                          filePath: tempFilePath,
                          success(res) {
                            wx.hideLoading()
                            wx.showToast({
                              title: '保存成功',
                              icon: 'none'
                            });
                            that.setData({
                              haibao: false
                            })
                          },
                          fail(res) {
                            wx.hideLoading()
                            console.log(res);
                          }
                        })
                      }
                    });
                  } else {
                    console.log('用户点击取消')
                  }
                }
              });

            }
          })
        } else {
          console.log('保存图片')
          wx.saveImageToPhotosAlbum({
            filePath: tempFilePath,
            success(res) {
              wx.hideLoading()
              console.log('保存图片成功回调')
              wx.showToast({
                title: '保存成功',
                icon: 'none'
              });

              that.setData({
                haibao: false
              })
            },
            fail(res) {
              wx.hideLoading()
              console.log('saveImageToPhotosAlbum 失败回调')
              console.log(res);
            }
          })
        }
      },
      fail(res) {
        wx.hideLoading()
        console.log('wx.getSetting 失败回调')
        console.log(res);
      }
    })

  },