DIV CSS 佈局教程網

 　　主要用了兩個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>