小程序canvas生成图片压缩和失真问题draw失效问题汇总

canvas生成图片失真问题

• canvas生成图片的过程

1. 把网络图片保存到小程序的缓存中，并获取到图片的信息用getImageInfo
2. 在canvas上绘制想要的图片，用canvas各种方法
3. 使用canvasToTempFilePath或者saveImageToPhotosAlbum保存图片

分析决定图片质量， 图片失真的原因在第三部，使用canvasToTempFilePath保存的时候。

• 示例代码

saveImageCanvas(){
     
    wx.showLoading({
     
      title: '正在保存',
    })
    let bgImageObj = this.data.bgImageObj;
   
    wx.canvasToTempFilePath({
     
      x: 0,
      y: 0,
      width: 300,
      height: 500,
      destWidth: bgImageObj.width,  // 决定了保存图片的清晰程度
      destHeight: bgImageObj.height,  // 决定了保存图片的清晰程度
      canvasId: 'share',
      success(res) {
     
        console.log(res.tempFilePath);
        wx.saveImageToPhotosAlbum({
     
          filePath: res.tempFilePath,
          success(res) {
      
            wx.hideLoading()
            wx.showToast({
     
              title: '图片保存成功',
            
            })
            console.log("保存成功")}
        })
      },
      fail(){
     
        console.log("shibai");
        wx.hideLoading()
        wx.showToast({
     
          title: '图片保存失败，请稍后再试',
          icon: 'none'
        })
      },
      complete(){
     
        console.log("完成")
      }
    })
  }

canvasToTempFilePath的destWidth, destHeight决定了图片的清晰度和像素。只要按比例放大这个数值，图片质量也会提高。

在ios中draw失效问题

• 示例代码

				cxt_arc.draw(false, function (e) {
     
                    console.log('draw callback')
                })

• 问题分析

canvas.draw 绘图结束后的回调再IOS上不执行，安卓手机未见此问题。
原因为：页面上设置了 wx:if hidden，本想在绘图结束后再显示，不过再IOS11上不行。

解决办法：去掉hidden / wx:if 或者再draw之前显示页面，总之页面不显示没办法在IOS上执行draw的回调函数