微信小程序中的canvas绘制图片截图，拿到的图片会模糊

Question

需求是我在微信小程序中使用canvas把图片绘制到图中黑框区域，然后进行编辑操作最后拿到编辑后的图片，图片肯定不能小因为是要打印到衣服上的，但是用手机中黑框截图出来的图片肯定是有限的大小，当我要截图时，我发现使用wx.canvasToTempFilePath()这个api截图出来的图设置指定长宽就会糊掉，我在想一开始绘制的时候就已经把图片已经压缩，再放大肯定会糊的，该怎么解决这个问题？

Answer 1

你的图片实际大小是大于canvas的大小的。比如你的图片是1200*800， 而你的canvas大小只有600*400。当你使用ctx.drawImage(src, 0, 0, 600, 400)后，你的图片就被压缩到了canvas的大小，就会造成截出来图片适量下降。方案1准备两个canvas，一个绘制压缩图(600400)，一个绘制原图大小(1200800)，截图的时候从原图canvas截取。方案2将canvas大小设为(1200*800)，使用css将canvas缩放到适应屏幕大小。