javascript - 关于canvas处理图片的问题
扔个三星炸死你
扔个三星炸死你 2017-06-10 09:49:16
0
3
922

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

真是服了,下面谁给孤月和杰克点的踩?他们说的是对的方法啊!

扔个三星炸死你
扔个三星炸死你

全部回复(3)
左手右手慢动作

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

仅有的幸福

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

洪涛

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!