生成透明的图片

[baimin5566]

剪裁后生成了透明的图片，好像是没有画到画布里面

[jimmyrogue]

@baimin5566 将149行开始方法改写成如下即可。

  // 获取图片
  getImageInfo() {
    var _this = this
    wx.showLoading({
      title: '图片生成中...',
    })
    wx.downloadFile({
      url: _this.data.imageSrc, //仅为示例，并非真实的资源
      success: function (res) {
        // 将图片写入画布
        const ctx = wx.createCanvasContext('myCanvas')
        ctx.drawImage(res.tempFilePath)
        ctx.draw(true, () => {
          // 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题
          var canvasW = (_this.data.cutW / _this.data.cropperW) * (_this.data.imageW / pixelRatio)
          var canvasH = (_this.data.cutH / _this.data.cropperH) * (_this.data.imageH / pixelRatio)
          var canvasL = (_this.data.cutL / _this.data.cropperW) * (_this.data.imageW / pixelRatio)
          var canvasT = (_this.data.cutT / _this.data.cropperH) * (_this.data.imageH / pixelRatio)
          console.log(`canvasW:${canvasW} --- canvasH: ${canvasH} --- canvasL: ${canvasL} --- canvasT: ${canvasT} -------- _this.data.imageW: ${_this.data.imageW}  ------- _this.data.imageH: ${_this.data.imageH} ---- pixelRatio ${pixelRatio}`)
          wx.canvasToTempFilePath({
            x: canvasL,
            y: canvasT,
            width: canvasW,
            height: canvasH,
            destWidth: canvasW,
            destHeight: canvasH,
            canvasId: 'myCanvas',
            success: function (res) {
              wx.hideLoading()
              // 成功获得地址的地方
              console.log(res.tempFilePath)
              wx.previewImage({
                current: '', // 当前显示图片的http链接
                urls: [res.tempFilePath] // 需要预览的图片http链接列表
              })
            }
          })
        })
      }
    })
  },

重点在于ctx.draw方法，canvasToTempFilePath方法要写在draw方法的回调内才能保证正确调用