微信小程序canvas制作分享海报（可保存图片）

效果图（按钮，弹窗样式根据需要自行调整）：
点击分享好友会直接触发微信的小程序分享，
点击保存图片会保存至相册，供发朋友圈使用；
注意：昵称，头像，二维码，海报底图背景都可以从接口获取动态绘制，
接口获取的图片src必须是https（开发版本可以用http），然后需要用wx.downLoad下载，然后使用临时地址来生成海报，否则会报错。

	wx.downLoad({
      url: 'https://。。。。',
      success: function(res) {
        that.setData({
          headImg: res.tempFilePath,  //res.tempFilePath即可使用，直接用网络图片会报错
        })
      }
    })

wxml代码：

  <view bindtap='shareTenant' style='display:flex;align-items:center;background:#fff;padding:1%;border-radius:109rpx;box-shadow:0rpx 0rpx 20rpx {{mainColor}};position:fixed;bottom:75px;z-index:999;right:40vw;'>
    <text class='f12' style="color:{{mainColor}};">点击分享</text>
  </view>

  <canvas canvas-id="myCanvas" style="width:{{canvasw}};height:{{canvash}};" hidden='{{canvasHide}}' />
  <view class='defaultMask' wx:if="{{showAction}}" bindtap='closeMask' catchtouchmove="stopPageScroll"></view>


  <image src='{{shareImageSrc}}' wx:if="{{showAction}}" mode='widthFix' bindtap='closeMask' style='position:fixed;top:5vw;width:450rpx;left:150rpx;z-index:1001;' catchtouchmove="stopPageScroll"></image>


  <view class='flex shareTenantAction' wx:if="{{showAction}}">
    <button class='flex-item tc formButton' open-type='share' style='padding:0;margin:0;line-height:1.2;'>
      <view class='f14'>分享好友</view>
    </button>
    <view class='flex-item tc' bindtap='saveImage'>
      <view class='f14'>保存图片</view>
    </view>
  </view>

css样式

/**index.wxss**/

.shareTenantAction {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  z-index: 1002;
  padding: 60rpx 0;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}


.flex {
  display: flex;
}

.flex .flex-item {
  flex: 1;
}

.defaultMask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  box-sizing: border-box;
}

js代码

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {},
  onLoad: function() {
    let that = this;
    wx.getImageInfo({
      src: '../../img/bg.png',
      success(res) {
        that.setData({
          imageWidth: res.width / 2,
          imageHeight: res.height / 2
        })
      }
    })
  },
  //点击分享获取商家海报
  shareTenant() {
    wx.showLoading({
      title: '海报生成中~',
    })
    setTimeout(function() {
      wx.hideLoading()
    }, 10000)
    let that = this;
    var headImg = '../../img/headImg.jpg';
    let bg = '../../img/bg.png';
    let code = '../../img/code.png';
    let nickName = '知晓';

    //如果图片是网络url的，要先用wx.downLoad下载，获取微信的临时地址图片再生成海报
    // wx.downLoad({
    //   url: 'https://。。。。',
    //   success: function(res) {
    //     that.setData({
    //       headImg: res.tempFilePath,  //res.tempFilePath即可使用，直接用网络图片会报错
    //     })
    //   }
    // })

    //设置canvas的大小，与海报底图大小保持一致
    that.setData({
      canvasHide: false,
      canvasw: that.data.imageWidth + 'px',
      canvash: that.data.imageHeight + 'px'
    })
    var w = that.data.imageWidth;
    var h = that.data.imageHeight;
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.beginPath()
    ctx.fillRect(0, 0, w, h)
    ctx.drawImage(bg, 0, 0, w, h) //商家海报底图
    ctx.save();
    ctx.drawImage(headImg, 0.09 * w, 0.78 * h, 0.12 * w, 0.12 * w) //头像
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
    //canvas推荐人昵称头像填充
    ctx.setTextAlign('center')
    ctx.setFillStyle('rgb(0,0, 0)')
    ctx.setFontSize(16)
    ctx.fillText(nickName, 0.15 * w, 0.78 * h + 0.17 * w)
    ctx.drawImage(code, 0.63 * w, 0.78 * h, 0.3 * w, 0.3 * w)
    ctx.draw();
    setTimeout(function() {
      //将cavas变成图片
      wx.canvasToTempFilePath({
        //通过id 指定是哪个canvas
        canvasId: 'myCanvas',
        success(res) {
          wx.hideTabBar()
          wx.hideLoading()
          that.setData({
            canvasHide: true,
            showAction: true,
            shareImageSrc: res.tempFilePath
          })
        }
      })
    }, 500)
  },
  //关闭分享弹窗
  closeMask() {
    wx.showTabBar()
    this.setData({
      canvasHide: true,
      showAction: !this.data.showAction
    })
  },
  //保存图片
  saveImage() {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.shareImageSrc,
      success: function(res) {
        wx.showToast({
          title: '图片已保存相册',
          icon: 'success',
          duration: 2000
        })
      },
      fail: function(res) {}
    })
  }
})