一、图片清晰度
项目用的是淘宝小程序，百度了一大圈，能参考的也就是微信小程序，都是说改变输出图片宽高也就是destWidth，destHeight，如下图：
但经过实测 真的没用 该模糊的还是模糊，然后怒而看原生canvas发现和小程序的文档大差不差，遂作罢，但我们已知等式：原始尺寸 = 样式尺寸 * 像素比倍率
我们知道解决清晰度的关键就是先放大后缩小，由此可得如下操作
先在canvas标签作如下操作
<canvas id="canvas" width="{{canvasWidth * systemInfo.pixelRatio}}" height="{{canvasHeight * systemInfo.pixelRatio}}" style="width: {{canvasWidth}}px;height: {{canvasHeight}}px;"></canvas>
width和height属性是canvas标签的宽高，style内的canvasWidth和canvasHeight才是最后实际展示渲染的宽高，systemInfo.pixelRatio则是通过my.getSystemInfo API获取到的像素比
做完上述操作后，得到如下图渲染所示：红框为实际展示的canvas区域大小，图片只渲染了一部分
所以为了要完整渲染这个canvas区域，我们需要对他进行放大，
let { pixelRatio } = this.data.systemInfo // 获取设备像素比
const ctx = my.createCanvasContext('canvas') // 获取canvas
ctx.scale(pixelRatio, pixelRatio) // 放大canvas
放大之后，会如下图所示
可以看到canvas已经被填满了，实际图片相较于没做操作之前也已经很清晰非常多，与原图保持一致
最后导出图片的时候也记得放大图片宽高
ctx.toTempFilePath({
x: x,
y: y,
width: w * pixelRatio,
height: h * pixelRatio,
// destWidth: w * pixelRatio, // 输出图片宽度
// destHeight: h * pixelRatio, // 输出图片高度
fileType: 'jpg',
quality: 1, // 图片的质量，目前仅对 jpg 有效，取值范围为 (0, 1]
success(res) {
that.setData({
apFilePath: res.apFilePath
})
},
fail(error) {
console.log(error);
}
});
自此 canvas图片模糊就结束了
