微信小程序canvas画布转化出来的图片模糊问题的解决方案

来源:网络 文章列表 2020-01-03 8
canvas画图简单的流程就是:创建画布->在画布中画图->从可见画布生成图片->保存图片到客户端设备的相册中。其中画布转图片,微信小程序提供一个名为wx.canvasToTempFilePath,该API的参数如下:

canvas画图简单的流程就是:创建画布->在画布中画图->从可见画布生成图片->保存图片到客户端设备的相册中。其中画布转图片,微信小程序提供一个名为wx.canvasToTempFilePath,该API的参数如下:

其中一个重要的api是 wx.canvasToTempFilePath,这个api的作用是 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。

其主要参数是如下:

然而,在讨论组中经常看到一个问题,那就是canvas生成的图片保存后很模糊,包括我自己第一次按照官方文档写demo的时候也遇到过。现在在网上搜索这个的问题的内容,出现最多的就是两个方案,而且很多内容都是复制已有文章内容的。

方案一:方案1准备两个canvas,一个绘制压缩图(600*400),一个绘制原图大小(1200*800),截图的时候从原图canvas截取。

但实际上上这个方案有一点问题:其一,生成需要两个画布;其二,绘制过大画布在安卓上面会出现问题,官方文档里也提示了避免设置过大的宽高,在安卓下会有crash的问题。

 

方案二:将canvas大小设为(1200*800),使用css将canvas缩放到适应屏幕大小。(此步骤可省略,直接设置destWidth和destHeight乘以像素比即可)

这在开发工具的模拟器中是没有问题的,然而在真机测试的时候是无效的,不管用的是transform还是zoom。

本质上就是生成一个更大的图片,因为手机的屏幕设备的像素比现在一般都是超过2的。实际上我们只需要在使用wx.canvasToTempFilePath的时候,设置参数destWidth和destHeight(输出的宽度和高度)为width和height的2倍以上即可,一般设置为屏幕像素密度比较好,可以wx.getSystemInfo这个API来获取设备的像素比了(pixelRatio)。但是仔细看destWidth和destHeight的参数说明,我们其实压根不需要设置这个参数,因为它默认的就是取的width乘以屏幕像素密度。

另外你还可以设置下图片格式为jpg,因为图片的质量,目前仅对 jpg 有效。将quality的值设置为1试试。

我项目里,我是这样设置的,手机导出的图片上的文字非常的清晰:

// 生成图片
  ctx.draw(true, function () {
    // return false
    wx.canvasToTempFilePath({
      canvasId: mycanvasid,
      x: offsetx,
      y: offsety,
      fileType,// 设为jpg
      quality, // 1
      width: width,// 750
      height: height, // 1330
      // destWidth: destWidth, // 很多教程说这个设置为width的2倍,其实用默认值就好了,不用设置
      // destHeight: destHeight,
      success: function (res) {
        // 回调 返回临时的图片地址
        callback(res.tempFilePath)
      },
      fail: function () {
        // 导出图片错误
        wx.showModal({
          title: '导出图片时出错',
          content: '请重新尝试!',
        })
      },
      complete: function () {
        wx.hideLoading()
      }
    }, this)
  })

 

 

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论