小程序用canvas生成图片

效果如图

wxml

  <button bindtap='saveImageToPhotosAlbum' class="save">生成图片</button>
  <canvas canvas-id='share' wx:if="{
  {canvasHidden}}" style='width:{
  {screenWidth}}px;height:1500rpx; opacity: 0;'></canvas>

js

 data: {
 	canvasHidden:false
 },
// 线上的图片要先下载下来
 wx.getImageInfo({   //  获取二维码到本地
          src: 发请求后，后台返回的图片， 线上的图片,
          success: function (res) {
            //  console.log(res.path)
            _this.setData({
              canvasCode: res.path
            })
          }
        })
        
//  获取微信头像到本地
 wx.getImageInfo({   //  小程序获取图片信息API
              src: 发请求后，后台返回的图片，线上的微信头像,
              success: function (res) {
                _this.setData({
                  headImg: res.path
                })
              }
            })
    
    // 获取产品图
        wx.getImageInfo({   //  小程序获取图片信息API
          src:发请求后，后台返回的图片,
          success: function (res) {
            _this.setData({
              detailsBanner: res.path
            })
          }
        })

  // 生成canvas图片
  saveImageToPhotosAlbum: function () {
     that.setData({
            canvasHidden:true
          })
    var that = this;
    var unit = that.data.screenWidth / 375
    var avatarUrl = that.data.headImg
    var banner = that.data.detailsBanner
    var code = that.data.canvasCode
    var canvaBg = '/images/share.bg.png'
    var nickName = that.data.cacheMember.nickName
    var context = wx.createCanvasContext(&#