canvas中保存图片质量因平台差异明显？
发布于 6 年前 作者 chao19 17059 次浏览 来自 问答

发现用canavs生成的图片，IOS上图片的质量超给差，android则好点，生成的图片用接口：canvasToTempFilePath， 代码如下：

                wx.canvasToTempFilePath({
                  canvasId: 'showCanvas',
                  success(res) {
                    console.log('generate=',res.tempFilePath);
                    g_result = res.tempFilePath;             
                    self.setData({
                      result:g_result,
                      showCanvas:false
                    })
                  }
                });

canvas代码：

<canvas style="width: 750rpx; height: 1334rpx;" canvas-id="showCanvas"></canvas>

在iphone6下面测得，生成的图片：375*667，格式：jpg, 大小：44.7k, 如下图，图片质量明显较差，看文字部分较明显有虚边，模糊。

在安卓米5s上面得，生成 图片：720*1280，格式：jpg，大小：94.2k，如下图：看文字部分明显清晰多

想问下这个转换生成的图片质量如何把控，IOS生成太影响体验，因为最终生成的图片都是存本地的，没有服务器的压力，如何提高质量，求解？

3 回复

我也刚好碰到这样的问题，不过看了下文档之后解决了。代码如下，之后还有遇到相同问题搜索到这里的希望有帮助：

wx.canvasToTempFilePath({
  x: 0,
  y: 0,
  width: 680 * px2rpx,
  height: 800 * px2rpx,
  destWidth: 2040,
  destHeight: 2400,
  canvasId: 'shareCanvas',
  fileType:'jpg',
  quality:1,
  success: function (res) {
      that.setData({
      shareImage: res.tempFilePath,
      showSharePic: true
      })
  },
)}

有两点可以设置来提高图片质量：一是fileType参数设为jpg后把quality设为1，二是把生成的图片宽高值设大一点。

文档里面说了的：

这两个值越大图片越清晰，只要保持宽高比与画布宽高比一致就好了

下个版本是什么时候，现在的仍然有问题

下个版本修复。

回到顶部