我需要将一张用户上传的图片使用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...
canvas的width和height都设置成和图片原始大小一样,但是使用style将canvas缩放在可视区域。这样就不会对图片进行压缩
感谢你的邀请,虽然我很想回答你,但我没试过,所以也不知道。当然你可以自己去试试,反正花不了多少时间。
不过我们可以换一种思维,为什么你要去缩小图片然后绘制到canvas上?
将图片缩放到可视区域范围内不是一个max-width或者max-height不就搞定了吗?这只是图片表面上被缩小了,实际上的naturalWidth和naturalHeight是没变的,所以缩放还原其实是多此一举。
你展示在浏览器可视区域内用img就可以,不要用canvas,canvas是用来处理图片的。 如果你非得展示canvas正在处理中的图片,那你另外创建一个离屏canvas就行,然后把相关的处理等比缩放弄上去就可以,最后保存离屏canvas就行。
不知道我有没有讲清楚。
HTML5 之图片上传预处理https://juejin.im/entry/5933e...