小程序群发分享canvas合成图片

需求：小程序群发拉新人得分

分析：小程序不支持分享到朋友圈，只能分享带分享二维码得图片群发。所以需要创建一个canvas来合成背景图&分享的二维码，让用户保存到相册系统中去（访问相册系统需授权）

思路：
1.首先先获取两张图片的缓存（本地）路径信息，因为[CanvasContext]对象的drawImage不支持网络图片。所以用wx. getImageInfo获取图片本地信息
2.要保证合成图片成功，首先必须保证要合成的两张图片已经获取到了，所以是用来Promise.all()
3.canvas组件必须给高宽，不然合成的图片会是空白的，也不能隐藏，也不能至于底层，因为canvas这种原生组件在小程序是最高层的，所以用了绝对定位
4.画布合成之后就是将画布内容导出图片(wx. canvasToTempFilePath)之后保存到用户的相册系统(wx.saveImageToPhotosAlbum()中去。

直接上代码啦

  // 获取分享二维码图片本地信息
  const photoUrl = ''//这里是二维码图片的地址
  drawUserQr() {
    return new Promise((resolve) => {
      wx.getImageInfo({
        src: photoUrl,
        success(res) {
          console.log('二维码路径', res.path)
          resolve(res)
        }
      })
    })
  },

// 获取分享背景图片本地信息
const bgImageUrl = '' //这是需要合成的背景图地址
  getBgImg() {
    return new Promise((resolve) => {
      wx.getImageInfo({
        src: bgImageUrl,
        success(res) {
          console.log('背景图片路径', res.path)
          resolve(res)
        }
      })
    })
  },

// 合成图片
  mergrImg() {
    var that = this
    Promise.all([this.getBgImg(), this.drawUserQr()]).then(res => {
      const ctx = wx.createCanvasContext('shareCanvas')
      // 底图
      ctx.drawImage(res[0].path, 0, 0, 600, 960)
      // 二维码宽
      const qrImgSize = 235
      //ctx.drawImage(path, x, y, w, h)
      ctx.drawImage(res[1].path, (600 - qrImgSize) / 2, 530, qrImgSize, 267)
    
      ctx.stroke()
      ctx.draw()
    })
  },

<!----wxml--->
<canvas  canvas-id="shareCanvas" style="width:600px;height:960px;position: fixed;top:999999rpx;left: 0"></canvas>

//判断是否授权访问相册系统
isAuthWritePhoto() {
    wx.getSetting({
      success: (res) => {
        if (res.authSetting['scope.writePhotosAlbum']) {
        } else {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success(res) {
            }
          })
        }
    }) 
  }
}

    // 画布内容导出的图片 并保存到相册系统
  savePhoto() {
    wx.canvasToTempFilePath({
      canvasId: 'shareCanvas',
      success(res) {
        console.log('画布内容导出的图片本地路径', res.tempFilePath)
        wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success(result) {
                wx.showToast({
                  title: '保存图片成功,赶紧去分享吧',
                  icon: 'none',
                  duration: 2000,
                  mask: true
                })
              },
              fail(err) {
                wx.showToast({
                  title: '保存图片失败',
                  icon: 'none',
                  duration: 2000,
                  mask: true
                })
              }
            })
      }
    })
  }

最后编辑于：2019.01.03 17:41:54