【微信小程序采坑】用微信Canvas导出的图片到手机上会出现图片模糊问题

最新推荐文章于 2024-05-28 10:44:06 发布

程序员通通

最新推荐文章于 2024-05-28 10:44:06 发布

阅读量8.6k

点赞数 3

分类专栏：微信小程序文章标签：小程序-canvas

本文链接：https://blog.csdn.net/AC_greener/article/details/80086484

版权

微信小程序中，使用Canvas导出的图片在高分辨率手机上出现模糊现象，原因是逻辑像素与物理像素的差异。官方解释涉及Canvas的density，导出图片尺寸基于逻辑像素而非物理像素导致缩放模糊。解决办法是将导出图片大小设置为Canvas大小的2到4倍。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

特别是分辨率高的手机，图片就越模糊。个问题其实和像素比有关，官方解释：destWidth和destHeight单位是物理像素（pixel），canvas绘制的时候用的是逻辑像素（物理像素=逻辑像素 * density），所以这里如果只是使用canvas中的width和height（逻辑像素）作为输出图片的长宽的话，生成的图片width和height实际上是缩放了到canvas的 1 / density大小了，所以就显得比较模糊了。
粗暴的解决方法：吧导出图片的大小设置为Canvas大小的2到4倍即可。

eg：


wx.canvasToTempFilePath({
      width: 170, //canvas原本的大小
      heght: 170,
      destWidth: 680,  //生成图片的大小设置成canvas大小的二倍
      destHeight: 680,
      canvasId: 'myCanvas',
      fileType: 'png',
      quality: 1,
      success: (re