【避坑指“难”】绝杀小程序wx.canvasToTempFilePath()导出图片模糊、尺寸压缩问题

前言

在小程序开发中，经常需要将Canvas绘制的内容导出为图片，以便进行保存、分享或进一步处理。然而，开发者们往往会遇到这样一个恼人的问题：导出的图片模糊不清，尺寸还被无情压缩，大煞风景。这究竟是为何？如何解决？本文将为你拨开迷雾，一探究竟。

问题根源

小程序中，Canvas导出图片的模糊和尺寸压缩问题，其根源在于导出图片时默认的画布分辨率。默认情况下，小程序会根据设备的屏幕分辨率来创建Canvas，但由于手机屏幕的像素比往往超过2，导致导出图片的分辨率也相应降低，从而造成模糊和尺寸压缩。

解决方案

既然问题找到了，解决办法也就水到渠成了。我们只需要在导出图片前，手动将Canvas的分辨率提高，即可轻松解决模糊和尺寸压缩问题。具体操作如下：

1. 设置Canvas的分辨率

在创建Canvas时，通过设置width和height属性来指定Canvas的分辨率。将分辨率设置为原始分辨率的2倍或更高，如：

const canvas = wx.createCanvas({
  width: 375 * 2, // 原始宽度 * 2
  height: 667 * 2, // 原始高度 * 2
});

2. 导出图片

设置好分辨率后，就可以导出图片了，使用wx.canvasToTempFilePath方法：

wx.canvasToTempFilePath({
  canvas: canvas,
  success: (res) => {
    console.log('导出图片成功：', res.tempFilePath);
  },
  fail: (err) => {
    console.error('导出图片失败：', err);
  }
});

实例演示

为了更直观地展示解决办法，我们来看一个实例。假设我们有一个Canvas，里面绘制了一个简单的矩形。默认导出图片后，会遇到模糊和尺寸压缩问题：

按照上述解决方案，将Canvas的分辨率提高2倍，然后再导出图片，就可以得到清晰且尺寸正常的图片：

进阶技巧

除了提高分辨率外，还可以通过调整导出图片的格式来进一步提升图片质量。小程序支持导出PNG和JPEG两种格式，PNG格式无损压缩，JPEG格式有损压缩但文件体积更小。根据实际需要选择合适的导出格式。

总结

通过设置Canvas的分辨率，可以有效解决小程序wx.canvasToTempFilePath()导出的图片模糊和尺寸压缩问题。掌握这个技巧，让你的小程序图片从此清晰绽放，告别模糊困扰！