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

图片描述

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

阅读 17k
3 个回答
新手上路,请多包涵

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

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

方案1

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

方案2

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

请问这个问题你解决了吗

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题