【web】js图片压缩并上传——图片压缩-demo01

引用其他大神的项目进行分析——很好的一个学习材料

http://www.cnblogs.com/axes/p/4603984.html

项目成品图：

运行的状态：



点击上传图片，并随机选择一张图片：



目前来说，HTML5的各种新API都在移动端的webkit上得到了较好的实现。

根据查看caniuse，本demo里使用到的FileReader、Blob、Formdata对象均已在大部分移动设备浏览器中得到了实现（safari6.0+、android 3.0+），所以直接在前端压缩图片，已经成了很多移动端图片上传的必备功能了。

实现思路：

在移动端压缩图片并且上传主要用到filereader、canvas 以及 formdata 这三个h5的api。

三大部分：

【一】获取图片数据

用户使用input file上传图片的时候，用filereader读取用户上传的图片数据（base64格式）

【二】压缩图片

把图片数据传入img对象，然后将img绘制到canvas上，再调用canvas.toDataURL对图片进行压缩

【三】图片上传

获取到压缩后的base64格式图片数据，转成二进制塞入formdata，再通过XmlHttpRequest提交formdata。

如此三步，就完成了图片的压缩和上传。

第一部分：

采用了多文件的方式进行上传，如图所示：



备注：

功能看自身需要，如只需单文件上传可以自行更改，在此不重复论述。

第二部分：图片压缩

这里稍微有些坑！！！！！！！！！

在做移动端图片上传的时候，用户传的都是手机本地图片，而本地图片一般都相对比较大，平时拍很多图片都是一两M的，如果直接这样上传，那图片就太大了，如果用户用的是移动流量，完全把图片上传显然不是一个好办法，因此需要先把图片压缩一下。

但是此项目在压缩的过程中，在电脑浏览器操作时，没什么问题；但是应用到移动端时，会有明显的卡顿，这是因为项目中使用大量算法导致大图片压缩的时间比较长，这样是严重影响用户体验的。

ps:正因为如此，所以本人最后没有采用此项目，但是还是比较有研究的价值！

第三部分：图片上传

完成图片压缩后，就可以塞进formdata里进行上传了，先将base64数据转成字符串，再实例化一个ArrayBuffer，然后将字符串以8位整型的格式传入ArrayBuffer，再通过BlobBuilder或者Blob对象，将8位整型的ArrayBuffer转成二进制对象blob，然后把blob对象append到formdata里，再通过ajax发送给后台即可。

图片的上传可以使用ajax上传，也可以使用XMLHttpRequest对象上传，XmlHttpRequest不仅可以发送大数据，还多出了比如获取发送进度的API，代码里也进行了简单的实现。

此项目采用
bfa5
了XMLHttpRequest的方式进行上传，因此同学们使用项目时，注意下图划起来的部分，这里是需要写后台被访问的接口，而项目中无法提供接口，因此运行时会报错的！！