我需要将一张用户上传的图片使用canvas进行处理,用户上传的尺寸可能会很大,比如会超出当前浏览器窗口的宽高,所以我将其等比缩放到浏览器可视区域内,然后绘制到canvas上,可是这样我就相当于把用户的图片缩小了,canvas处理完后,有办法将其处理后的的图片还原到原始尺寸,并且不会导致模糊的办法吗?
我需要将一张用户上传的图片使用canvas进行处理,用户上传的尺寸可能会很大,比如会超出当前浏览器窗口的宽高,所以我将其等比缩放到浏览器可视区域内,然后绘制到canvas上,可是这样我就相当于把用户的图片缩小了,canvas处理完后,有办法将其处理后的的图片还原到原始尺寸,并且不会导致模糊的办法吗?
感谢你的邀请,虽然我很想回答你,但我没试过,所以也不知道。当然你可以自己去试试,反正花不了多少时间。
不过我们可以换一种思维,为什么你要去缩小图片然后绘制到canvas上?
将图片缩放到可视区域范围内不是一个max-width或者max-height不就搞定了吗?这只是图片表面上被缩小了,实际上的naturalWidth和naturalHeight是没变的,所以缩放还原其实是多此一举。
你展示在浏览器可视区域内用img就可以,不要用canvas,canvas是用来处理图片的。 如果你非得展示canvas正在处理中的图片,那你另外创建一个离屏canvas就行,然后把相关的处理等比缩放弄上去就可以,最后保存离屏canvas就行。
不知道我有没有讲清楚。
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
canvas的width和height都设置成和图片原始大小一样,但是使用style将canvas缩放在可视区域。这样就不会对图片进行压缩