Html5圖片壓縮與剪下
阿新 • • 發佈：2019-02-15
Html5的 FileReader物件主要用來把檔案讀入記憶體，並且讀取檔案中的資料。對圖片上傳這裡用到的是該物件的readAsDataURL方法，該方法用於將檔案中的資料讀取為dataURL，如
壓縮，利用canvas的drawImage方法來繪製圖片，並且設定繪製的圖片的width跟height，最後再通過canvas的toDataURL方法來生成壓縮後的dataURL。
toDataURL 是 canvas 畫布元素的方法，返回指定圖片格式的 dataURL，也就是 base64 編碼串。
toDataURL 方法最多接受兩個引數，並且這兩個引數都是可選的：
type 圖片格式。支援 3 種格式，分別是 image/jpeg image/png image/webp ，預設是 image/png 。其中 image/webp 只有 chrome 才支援。
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>圖片壓縮與剪下</title> <script src="user/admin/js/jquery.min.js"></script> </head> <body class="f-info-c"> <div> <input id="notify" type="text" readonly="readonly"/> </div> <div> <input id="photo" type="file" accept="image/*" /> </div> <div> <label>sx:</label><input id="sx" type="text" style="width:30px"/> <label>sy:</label><input id="sy" type="text" style="width:30px"/> <label>sw:</label><input id="sw" type="text" style="width:30px"/> <label>sh:</label><input id="sh" type="text" style="width:30px"/> <label>dx:</label><input id="dx" type="text" style="width:30px"/> <label>dy:</label><input id="dy" type="text" style="width:30px"/> <label>dw:</label><input id="dw" type="text" style="width:30px"/> <label>dh:</label><input id="dh" type="text" style="width:30px"/> <button onclick="cut()">剪下</button> </div> <div> <img src='' id="modifyImg" /> </div> <div> <canvas id="cutCnvs" width="500px" height="350px"></canvas> </div> </body> <script> //壓縮 $('#photo').change(function(){ var _this = $(this)[0], _file = _this.files[0], fileType = _file.type; console.log(_file.size); if(/image\/\w+/.test(fileType)){ $("#notify").val('圖片上傳中...'); var fileReader = new FileReader(); fileReader.readAsDataURL(_file); fileReader.onload = function(event){ var result = event.target.result; //返回的dataURL var image = new Image(); image.src = result; image.onload = function(){ //建立一個image物件，給canvas繪製使用 var cvs = document.createElement('canvas'); var scale = 1; if(this.width > 1000 || this.height > 1000){ //1000只是示例，可以根據具體的要求去設定 if(this.width > this.height){ scale = 1000 / this.width; }else{ scale = 1000 / this.height; } } cvs.width = this.width*scale; cvs.height = this.height*scale; //計算等比縮小後圖片寬高 var ctx = cvs.getContext('2d'); ctx.drawImage(this, 0, 0, cvs.width, cvs.height); var newImageData = cvs.toDataURL(fileType, 0.8); //重新生成圖片 var sendData = newImageData.replace("data:"+fileType+";base64,",''); $('#modifyImg').attr('src',newImageData); $.post('url',{type:'photo',value:sendData},function(data){ if(data.code == '200'){ $("#notify").val(''); }else{ $("#notify").val(data.message); } }); } } }else{ $("#notify").val('請選擇圖片格式檔案!'); } }); //剪下 function cut() { var sx = $("#sx").val(); var sy = $("#sy").val(); var sw = $("#sw").val(); var sh = $("#sh").val(); var dx = $("#dx").val(); var dy = $("#dy").val(); var dw = $("#dw").val(); var dh = $("#dh").val(); var canvas = $("#cutCnvs")[0]; var context = canvas.getContext('2d'); var source = $('#modifyImg')[0]; context.drawImage(source, sx, sy, sw, sh, dx, dy, dw, dh); } </script> </html>