51dev.com IT技术开发者社区

51dev.com 技术开发者社区

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

IT技术学习阅读(1813)2018-04-25 收藏0次评论

问题: 微信小程序中的canvas绘制图片截图,拿到的图片会模糊
描述:

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

解决方案1:

你的图片实际大小是大于canvas的大小的。
比如你的图片是1200*800, 而你的canvas大小只有600*400
当你使用ctx.drawImage(src, 0, 0, 600, 400)后,你的图片就被压缩到了canvas的大小,就会造成截出来图片适量下降。

方案1

准备两个canvas,一个绘制压缩图(600400),一个绘制原图大小(1200800),截图的时候从原图canvas截取。

方案2

canvas大小设为(1200*800),使用csscanvas缩放到适应屏幕大小。

解决方案2:

canvas中的图片使用多倍图,用css缩小canvas画布大小

以上就是微信小程序中的canvas绘制图片截图,拿到的图片会模糊的全部内容。