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

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

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

2.解决方案:

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

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

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

发布了46 篇原创文章 · 获赞 23 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/divaid/article/details/104696617