文章详情页
javascript - 关于canvas处理图片的问题
浏览：135日期：2022-11-21 13:09:57
问题描述
我需要将一张用户上传的图片使用canvas进行处理，用户上传的尺寸可能会很大，比如会超出当前浏览器窗口的宽高，所以我将其等比缩放到浏览器可视区域内，然后绘制到canvas上，可是这样我就相当于把用户的图片缩小了，canvas处理完后，有办法将其处理后的的图片还原到原始尺寸，并且不会导致模糊的办法吗？
真是服了，下面谁给孤月和杰克点的踩？他们说的是对的方法啊！问题解答
回答1：canvas的width和height都设置成和图片原始大小一样，但是使用style将canvas缩放在可视区域。这样就不会对图片进行压缩
回答2：感谢你的邀请，虽然我很想回答你，但我没试过，所以也不知道。当然你可以自己去试试，反正花不了多少时间。不过我们可以换一种思维，为什么你要去缩小图片然后绘制到canvas上？将图片缩放到可视区域范围内不是一个max-width或者max-height不就搞定了吗？这只是图片表面上被缩小了，实际上的naturalWidth和naturalHeight是没变的，所以缩放还原其实是多此一举。 你展示在浏览器可视区域内用img就可以，不要用canvas，canvas是用来处理图片的。 如果你非得展示canvas正在处理中的图片，那你另外创建一个离屏canvas就行，然后把相关的处理等比缩放弄上去就可以，最后保存离屏canvas就行。不知道我有没有讲清楚。
回答3：HTML5 之图片上传预处理https://juejin.im/entry/5933e...
标签：
JavaScript
相关文章：
1. MYSQL新建用户设置可以远程访问的问题2. python - 求一个在def中可以实现调用本def满足特定条件continue效果的方法（标题说不太清楚，请见题内描述）3. java - mybatis怎么实现在数据库中有就修改,没有就添加4. $fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题5. node.js - nodejs和前端JavaScript 字符串处理结果不一样是什么原因？6. 各位谁知道这个CSS时候哪里出错了？？？7. mysql - 我的myeclipse一直连显示数据库连接失败，不知道为什么8. mysql 5.7单表300万数据，性能严重下降，如何破？9. mysql - SQL操作时间的函数?10. mysql 为何insert的时候会有lock wait timeout 异常
排行榜
![$fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题](http://www.haobala.com/attached/image/news/202205/093622cb60.png)
网公网安备