移动端图片压缩上传
2017-5-5 hanbin JavaScript
在做移动端图片上传的时候,用户传的大都是本地图片,而本地图片一般相对过大,如果直接上传,那图片就太大,如果用户用的是流量,那就更不合理了。
在移动端压缩图片上传主要用到filereader,canvas,formdata,这三个h5API,整个过程是:
(1)用户使用input file上传图片的时候,用filereader读取上传的图片数据(base64格式);
(2)把图片数据传入img对象,然后img绘制到canvas上,在调用canvas.toDataUrl对图片进行压缩;
(3)获取压缩后的base6格式图片数据,转化成二进制塞进formdata,再通过ajax提交。
这样三步就完成了图片压缩上传。
一:获取图片数据。
获取图片数据,也就是监听input file的change事件,获取到上传文件对象,进行forEach循环。文件类型如果不是图片类型则不处理,如果是图片就实例化一个filereader,以base64格式读取上传文件数据,判断数据长度,如果大于200k,则进行compress压缩,否则调用upload方式上传。
二:图片压缩。
上面做完图片数据的获取后,就可以做compress压缩图片的方法了。而压缩图片也并不是直接把图片绘制到canvas再调用一下toDataURL就行的。
在IOS中,canvas绘制图片是有两个限制的: 首先是图片的大小,如果图片的大小超过两百万像素,图片也是无法绘制到canvas上的,调用drawImage的时候不会报错,但是你用toDataURL获取图片数据的时候获取到的是空的图片数据。 再者就是canvas的大小有限制,如果canvas的大小大于大概五百万像素(即宽高乘积)的时候,不仅图片画不出来,其他什么东西也都是画不出来的。 应对第一种限制,处理办法就是瓦片绘制了。瓦片绘制,也就是将图片分割成多块绘制到canvas上,代码里的做法是把图片分割成100万像素一块的大小,再绘制到canvas上。 而应对第二种限制,处理办法是对图片的宽高进行适当压缩,代码里为了保险起见,设的上限是四百万像素,如果图片大于四百万像素就压缩到小于四百万像素。四百万像素的图片应该够了,算起来宽高都有2000X2000了。 如此一来就解决了IOS上的两种限制了。 除了上面所述的限制,还有两个坑,一个就是canvas的toDataURL是只能压缩jpg的,当用户上传的图片是png的话,就需要转成jpg,也就是统一用canvas.toDataURL('image/jpeg', 0.1) , 类型统一设成jpeg,而压缩比就自己控制了。 另一个就是如果是png转jpg,绘制到canvas上的时候,canvas存在透明区域的话,当转成jpg的时候透明区域会变成黑色,因为canvas的透明像素默认为rgba(0,0,0,0),所以转成jpg就变成rgba(0,0,0,1)了,也就是透明背景会变成了黑色。解决办法就是绘制之前在canvas上铺一层白色的底色。
三:图片上传。
完成图片压缩后就能进行上传了,现将base64格式数据转化成字符串,在实例化一个ArrayBuffer,然后将字符串以八位整形的格式传入ArrayBuffer,再通过blow对象,将8位整形的ArrayBuffer转换成二进制的blow对象。然后append到formdata里,ajax发给后台即可。
至此整个图片压缩上传就完成了,因为是formdata提交,所以后台接收数据的时候就跟普通的form表单提交数据一样处理就行。