javascript - 关于canvas处理图片的问题

问题描述

我需要将一张用户上传的图片使用canvas进行处理，用户上传的尺寸可能会很大，比如会超出当前浏览器窗口的宽高，所以我将其等比缩放到浏览器可视区域内，然后绘制到canvas上，可是这样我就相当于把用户的图片缩小了，canvas处理完后，有办法将其处理后的的图片还原到原始尺寸，并且不会导致模糊的办法吗？

问题解答

canvas的width和height都设置成和图片原始大小一样，但是使用style将canvas缩放在可视区域。这样就不会对图片进行压缩

感谢你的邀请，虽然我很想回答你，但我没试过，所以也不知道。当然你可以自己去试试，反正花不了多少时间。不过我们可以换一种思维，为什么你要去缩小图片然后绘制到canvas上？将图片缩放到可视区域范围内不是一个max-width或者max-height不就搞定了吗？这只是图片表面上被缩小了，实际上的naturalWidth和naturalHeight是没变的，所以缩放还原其实是多此一举。 你展示在浏览器可视区域内用img就可以，不要用canvas，canvas是用来处理图片的。 如果你非得展示canvas正在处理中的图片，那你另外创建一个离屏canvas就行，然后把相关的处理等比缩放弄上去就可以，最后保存离屏canvas就行。不知道我有没有讲清楚。

HTML5 之图片上传预处理https://juejin.im/entry/5933e...