html5前端圖片壓縮

        /**
         * 圖片壓縮，大仙造
         * 技術交流495120021
         * @param fil
         * @param id
         */
        function getUrl(fil, id) {
            var Cnv = document.getElementById('myCanvas');
            var Cntx = Cnv.getContext('2d');//獲取2d編輯容器
            var imgss =   new Image();
            var agoimg=document.getElementById("ago");
            for (var intI = 0; intI < fil.length; intI++) {
                var tmpFile = fil[intI];
                var reader = new FileReader();
                reader.readAsDataURL(tmpFile);
                reader.onload = function (e) {
                    url = e.target.result;
                    imgss.src = url;
                    agoimg.src=url;
                    agoimg.onload = function () {
                        //等比縮放
                        var m = imgss.width / imgss.height;
                         Cnv.height =300;//該值影響縮放後圖片的大小
                         Cnv.width= 300*m ;
                        //img放入畫布中
                        //設置起始座標，結束座標
                        Cntx.drawImage(agoimg, 0, 0,300*m,300);
                    }
                }
            }
        }


        function  pressss(){//
            //獲取canvas壓縮後的圖片數據
            var Pic = document.getElementById("myCanvas").toDataURL("image/png");
            var imgs =document.getElementById("press");
            imgs.src =Pic ;
            //上傳
            // 去除多餘，得到base64編碼的圖片字節流
            Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "");
            //可以用ajax提交到後臺，提交後可以直接存數據庫，也可以保存成圖片，此處略。


        }



<input type="file" id="fileId" name="fileId" value="上傳圖片"
       hidefocus="true" onchange="getUrl(this.files,this.id);"/>
<canvas id="myCanvas"     style="display: none" ></canvas>
old img-><img src="" alt="" id="ago" style="width: 500px;"/>
<input type="button" value="ya suo->" onclick="pressss()" />
new img-><img src="" alt="" id="press"/>
</body>

</html>

下載地址：http://download.csdn.net/detail/jialiuyang/9451641