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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了小程序canvas生成图片压缩和失真问题draw失效问题汇总，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1373字，纯文字阅读大概需要2分钟。

内容图文

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

内容总结

以上是互联网集市为您收集整理的小程序canvas生成图片压缩和失真问题draw失效问题汇总全部内容，希望文章能够帮你解决小程序canvas生成图片压缩和失真问题draw失效问题汇总所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---