wx小程序用canvas生成图片流程与注意事项

Posted 2021-01-04 MvloveYouForever

1、需要画入canvas的 图片都需要先缓存到本地 

　　

let ps = []
    ps.push(that.loadImageFun(this.statusInfo.avatar_url, "headImg"))
    Promise.all(ps).then(res => {
    // 画图
})


loadImageFun(url, index) {
    let _this = this
    return new Promise((resolve, reject) => {
      wx.downloadFile({
        url,
        success(res) {
          if (res.statusCode === 200) {
            _this.loadedImgs[index] = res.tempFilePath
            resolve()
          }
          else
            reject()
        },
        fail() {
          reject()
        }
      })
    })
  },

2、从canvas中导出图片时，android手机生成不了图片。（原因是，draw的回调函数在android上是假回调，因为canvas还没准备好，所以得手动加延时了...）

//绘制图片
      ctx.draw(false, () => {
        setTimeout(()=>{
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: size,
            height: imgHeight,
            destWidth: size,
            destHeight: imgHeight,
            canvasId: ‘shcanvas‘,
            success: function (res) {
              var tempFilePath = res.tempFilePath;
              that.share_img = tempFilePath;
              // wx.previewImage({
              //   urls: [that.share_img],
              // })
            }
          })
        },1000)
      })