Two html5 APIs, one file and one canvas, are used for compression. The file reads the file and then stores the compressed photos in the memory, finally, the img in the memory transfer form. src, followed by Form submission.
The photo was taken with a single SLR, with more than 5 MB of data. The three images under the ZIP file are more than 600 kb and more than 400 kb respectively. The last one of the kb images is of great distortion and the compression efficiency is quite high.
?
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 c Lass = "maid" >}< 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"> </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.tar get. files; </li> <li class = "L2"> // lele.log(filebtn.tar get); </li> <li class = "L3"> // console. log (files); </li> <li class = "L4"> var files = evt.tar get. 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 = "A9"> 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"> // lele.log(evt.tar get. files [0]); </li> <li class = "A9"> // lele.log(e.tar get); </li> <li class = "L0"> console.log(e.tar get. result); </li> <li class = "L1"> var I = document. getElementById ("test"); </li> <li class = "L2"> I. src = event.tar get. result; </li> <li class = "L3"> console. log ($ (I ). width (); </li> <li class = "L4"> console. log ($ (I ). height (); </li> <li class = "L5"> watermark (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 = "A9"> 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 = "A9" >}</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"> * es 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 com Pressed 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 = "A9"> </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"> // The width of the naturalWidth image </li> <li class = "L8"> cvs. width = source_img_obj.naturalWidth; </li> <li class = "9"> 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> |