编程语言
首页 > 编程语言> > 小程序canvas生成图片压缩和失真问题draw失效问题汇总

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

作者:互联网

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("完成")
      }
    })
  }

canvasToTempFilePathdestWidth, 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的回调函数

标签:canvas,console,log,draw,失真,wx,图片
来源: https://blog.csdn.net/ITzhongzi/article/details/113780205