js上传压缩图片
2024-08-26 10:36:50
原文链接:http://blog.csdn.net/iefreer/article/details/53039848
手机用户拍的照片通常会有2M以上，这对服务器带宽产生较大压力。
因此在某些应用下（对图片要求不那么高）我们可以在客户端来压缩图片，然后再提交给服务器。
总体思路是：
1. 使用HTML5的FileReader接口来读取用户上传的图片
2. 使用canvas drawImage接口绘制到Canvas 2d中
3. 使用canvas toDataUrl接口把图片转成base64编码字符串（这里可以降低图片质量）
4. 完成image src的替换后，表单提交时，就提交新的被压缩过的图像
这里不重复贴代码，直接看在线演示：http://wow.techbrood.com/fiddle/30625
该方案支持IE10+, FF, Chrome, Safari等现代浏览器。
有两点需要注意：
1. 注意在FF下，类似这样的处理方案必须确保canvas绘制和toDataUrl的处理是同步进行的，
也就是不能是异步处理的，否则可能会出现其他事件触发页面组合（Composite）而导致canvas缓存被清空的情况，那样toDataUrl出来的会是空白字符串。
2. 需要等image加载完成再做draw和转换的动作，否则一些浏览器会有问题。
最新文章
- 经典网页设计：20个华丽的 iPhone 应用程序演示网站
- 跳转页面&回到上一页
- Android 在资源文件（res/strings.xml）定义一维数组，间接定义二维数组
- std的find和reverse_iterator联合使用
- C++ Template Operator
- linux poll
- BIND9配置文件详解模板[转载]
- POJ 1577 Falling Leaves
- HTML系列（三）：文字设置
- Spring Boot 系列（二）单元测试&网络请求
- 获得当前EIP的值
- JVM 垃圾回收机制
- Ajax入门例子
- go微服务框架go-micro深度学习(四) rpc方法调用过程详解
- Kattis之旅——Number Sets
- 日记整理---->2016-11-26
- CodeForces - 620C Pearls in a Row 贪心 STL
- C# 读Autofac源码笔记（1）
- 【转】XDocument简单入门
- 关于IE6的一些总结