深入研究HTML5实现图片压缩上传功能

1. image.onload = function() {            var w = image.naturalWidth,   
2.           h = image.naturalHeight;            canvas.width = w / 1.5;   
3.         canvas.height = h / 1.5;            ctx.drawImage(image, 0, 0, w, h, 0, 0, w / 1.5, h / 1.5);   
4.         Upload.fileUpload(type);    };  

浏览器在本地取图片的时候是没法直接像file.size一样获取其长宽的，只能通过FileReader拿到内容后赋值给新建的image对象，新建的image对象下载需要时间！怎么破？不就是获取本地图片的尺寸吗，难道没有别的办法了？

于是想到了之前研究过的快速获取图片长宽的博文，点击进入 ，demo地址：http://jsbin.com/jivugadure/edit?html,js,output，定时去查询图片加载过程中的高度或者宽度，不用等整个图片加载完毕。

测了下，还是不行，因为定时查询这种方法对常规的server返回的图片有作用，这里图片地址是base64，貌似时间还更久了~哭。

小结一下：

1、用HTML5来压缩图片上传是可行的，在移动端我们不用依赖客户端或者插件，目前主流浏览器支持程度已经很高了。

2、压缩图片一方面是想减少用户上传等待的时间，另外也减少用户为此牺牲的流量，从整体时间来看，因为获取图片尺寸导致多一次下载需要耗时，其实压不压缩时间差别并不是特别大。除非大神们找到合适的方法能够直接获取图片的尺寸，麻烦也告知我一声，万分感谢；

3、既然时间成本差不多，但是我们压缩了图片，减少了图片的大小，减少了流量的消耗，存储空间以及下次获取该图片的时间，所以还是值得的。

 补充源代码：