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

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

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

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

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

方案二：将canvas大小设为(1200*800)，使用css将canvas缩放到适应屏幕大小。

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

本质上就是生成一个更大的图片，因为手机的屏幕设备的像素比现在一般都是超过2的。实际上我们只需要在使用wx.canvasToTempFilePath的时候，设置参数destWidth和destHeight(输出的宽度和高度)为width和height的2倍以上即可。

当然，这个具体数值也可以wx.getSystemInfo这个API来获取设备的像素比了（pixelRatio），这个像素比作为以上数值。