主要用了两个html5的 API，一个file，一个canvas，压缩主要使用cnavas做的，file是读取文件，之后把压缩好的照片放入内存，最后内存转入表单下 img.src，随着表单提交。
照片是自己用单反拍的，5M多，压缩下面3张分别是600多kb，400多kb，300kb的最后那张失真度很大了，压缩效率蛮高的。
?
1
<ol class="linenums"><li class="L0"></li></ol>
?
1
<ol class="linenums"><li class="L0"></li><li class="L1"></li><li class="L2"><meta charset="utf-8"></li><li class="L3"><title>File API Test</title></li><li class="L4"><script type="text/javascript" src="js/jquery-1.11.0.min.js"></script></li><li class="L5"><script type="text/javascript" src="js/JIC.js"></script></li><li class="L6"><style><li class="L7">#test{<li class="L8">display: none;<li class="L9">}<li class="L0"></style></li><li class="L1"></li><li class="L2"></li><li class="L3"><input type="file" id="fileImg"></li><li class="L4"><form><li class="L5"><img src="" id="test" alt=""></li><li class="L6"></li></form></li><li class="L7"><script></li><li class="L8">function handleFileSelect (evt) {</li><li class="L9">// var filebtn = document.getElementById(id);</li><li class="L0">// console.log(filebtn);</li><li class="L1">// var files = filebtn.target.files;</li><li class="L2">// console.log(filebtn.target);</li><li class="L3">// console.log(files);</li><li class="L4">var files = evt.target.files;</li><li class="L5">for (var i = 0, f; f = files[i]; i++) {</li><li class="L6"> </li><li class="L7">// Only process image files.</li><li class="L8">if (!f.type.match('image.*')) {</li><li class="L9">continue;</li><li class="L0">}</li><li class="L1"> </li><li class="L2">var reader = new FileReader();</li><li class="L3"> </li><li class="L4">// Closure to capture the file information.</li><li class="L5">reader.onload = (function(theFile) {</li><li class="L6">return function(e) {</li><li class="L7">// Render thumbnail.</li><li class="L8">// console.log(evt.target.files[0]);</li><li class="L9">// console.log(e.target);</li><li class="L0">console.log(e.target.result);</li><li class="L1">var i = document.getElementById("test");</li><li class="L2">i.src = event.target.result;</li><li class="L3">console.log($(i).width());</li><li class="L4">console.log($(i).height());</li><li class="L5">$(i).css('width',$(i).width()/10+'px');</li><li class="L6">//$(i).css('height',$(i).height()/10+'px');</li><li class="L7">console.log($(i).width());</li><li class="L8">console.log($(i).height());</li><li class="L9">var quality =50;</li><li class="L0">i.src = jic.compress(i,quality).src;</li><li class="L1">console.log(i.src);</li><li class="L2">i.style.display = "block";</li><li class="L3">};</li><li class="L4">})(f);</li><li class="L5"> </li><li class="L6">// Read in the image file as a data URL.</li><li class="L7">reader.readAsDataURL(f);</li><li class="L8">}</li><li class="L9">}</li><li class="L0"> </li><li class="L1">document.getElementById('fileImg').addEventListener('change', handleFileSelect, false);</li><li class="L2"></script></li><li class="L3"></li><li class="L4"></li></ol>
?
1
<ol class="linenums"><li class="L0">var jic = {</li><li class="L1">/**</li><li class="L2">* Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed</li><li class="L3">* @param {Image} source_img_obj The source Image Object</li><li class="L4">* @param {Integer} quality The output quality of Image Object</li><li class="L5">* @return {Image} result_image_obj The compressed Image Object</li><li class="L6">*/</li><li class="L7"> </li><li class="L8">compress: function(source_img_obj, quality, output_format){</li><li class="L9"></li><li class="L0">var mime_type = "image/jpeg";</li><li class="L1">if(output_format!=undefined && output_format=="png"){</li><li class="L2">mime_type = "image/png";</li><li class="L3">}</li><li class="L4"></li><li class="L5"> </li><li class="L6">var cvs = document.createElement('canvas');</li><li class="L7">//naturalWidth真实图片的宽度</li><li class="L8">cvs.width = source_img_obj.naturalWidth;</li><li class="L9">cvs.height = source_img_obj.naturalHeight;</li><li class="L0">var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);</li><li class="L1">var newImageData = cvs.toDataURL(mime_type, quality/100);</li><li class="L2">var result_image_obj = new Image();</li><li class="L3">result_image_obj.src = newImageData;</li><li class="L4">return result_image_obj;</li><li class="L5">},</li><li class="L6">function****(***){}</li><li class="L7">}</li></ol>
