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

微信小程序提供canvas组件以及比较丰富的关于canvas的API,非常常见的应用有生成一张带有小程序码或者二维码的图片用于小程序在朋友圈中传播,特别是淘宝客小程序更需要。

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


然而,在讨论组中经常看到一个问题,那就是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),这个像素比作为以上数值。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,994评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 14,507评论 2 59
  • 转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question...
    pengshuangta阅读 29,087评论 9 295
  • https://yeasy.gitbooks.io/blockchain_guide/content/intro/...
    lemonWr525阅读 1,256评论 0 0
  • 我偷懒时 水在替我读诗 清川能意会的事 你为何不明了
    我的昕阅读 2,241评论 0 0

友情链接更多精彩内容