小程序canvas分享图片模糊解决方案

看到网上有好多小程序分享图片显示及导出模糊问题，想了下解决方案备用：

1.原因：

       因为 canvas 不是矢量图，而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。比如说二倍屏，手机就会以2个像素点的宽度来渲染一个像素，该 canvas 在屏幕中相当于占据了2倍的空间，相当于被绘制的元素被放大了一倍，因此绘制出来的图片文字等会变模糊。

2.解决方案：

一、canvas图片生成与显示分离：

1. 在小程序中显示给用户看的用标签组合显示分享二维码及背景图；
2. 在保存到相册时用canvas绘制二维码及背景图后然后导出，canvas设置真实图片大小且设置在屏幕上方对用户不可见；
3. 导出后清空画布节省内存；

这样就能使显示给用户看的图片及导出的图片都清晰了。

二、canvas生成图片并保存后显示给用户：

1. canvas设置真实大小及用户不可见，在用户点击分享时把二维码与背景图组合填充canvas并保存canvas图片；
2. 给用户显示的image中设置保存的图片；

第二种方法适合分享的图片为一张的时候，分享的图片多张左右滑动时第一种适合。

注：这方法适用与分享二维码及背景图都是动态的情况，如果分享二维码及背景图都是固定的可以让UI切一整张图用image显示即可。