收藏
回答

canvas中保存图片质量因平台差异明显?

问题模块
API和组件

发现用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生成太影响体验,因为最终生成的图片都是存本地的,没有服务器的压力,如何提高质量,求解?


最后一次编辑于  2017-04-18  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

3 个回答

  • 周泡泡
    周泡泡
    2018-11-01

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

    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,二是把生成的图片宽高值设大一点。


    文档里面说了的:


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

    2018-11-01
    赞同 2
    回复
  • nomore
    nomore
    2017-06-02

    下个版本修复。

    2017-06-02
    赞同
    回复 1
    • BY
      BY
      2018-11-28

      请问,修复了么

      2018-11-28
      回复
  • 随风
    随风
    2017-06-28

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

    2017-06-28
    赞同
    回复