前言:有些WEB應用會在頁面顯示比較多的圖片,當圖片大小非常大的時候,頁面加載會非常緩慢,影響用戶體驗。本文介紹一種前端方法(Canvas)實現前端圖片壓縮。
壓縮效果:
選擇圖片文件
測試頁面HTML:
<input id="img-files" type="file" accept="image/*" multiple/>
<ul id="img-list-before">
</ul>
<button id="compress">壓縮</button>
<ul id="img-list-after">
</ul>
選擇圖片文件JS代碼:
$("#img-files").on("change", function (e) {
var files = e.target.files; // 事件對象
// 循環顯示圖片預覽
var sHtml = "";
for (var i = 0; i < files.length; i++) {
var file = files[i], reader = new FileReader();
reader.readAsDataURL(file); // 讀取方式
reader.onload = (function (reader) {
return function (e) {
sHtml = "<li class='img'><img src='" + e.target.result + "'/></li>";
$("#img-list-before").append(sHtml);
}
})(reader);
}
});
BTW,上面的代碼中涉及到JS處理文件的一些API,如選取的文件列表讀取:
// 幾種讀取文件列表的方法
var files = e.target.files; // 事件對象
var files = this.files; // 事件對象
var files = document.getElementById("img-files").files; // 純JS
var files = $("#img-files")[0].files; // jQuery
var files = $("#img-files").prop("files"); // jQuery
還有,FileReader相關API的使用,例子中使用到了FileReader的兩個屬性:
- FileReader.result : 文件的內容。該屬性僅在讀取操作完成後纔有效,數據的格式取決於使用哪個方法來啓動讀取操作。
- FileReader.onload : 處理load事件。該事件在讀取操作完成時觸發。
要讀取文件的內容,可以放在onload事件中。文件的讀取方式有多種,參見FileReader文件讀取方式。
圖片壓縮
運用canvas實現圖片壓縮:
function compress(img, width, height, ratio) { // img可以是dataURL或者圖片url
var canvas, ctx, img64;
canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
img64 = canvas.toDataURL("image/jpeg", ratio);
return img64; // 壓縮後的base64串
}
使用壓縮方法:
var image = new Image();
image.src = $(".img").eq(0).find("img").attr("src");
image.onload = function(){
var img64 = compress(image, 500, 400, 0.1);
$("#img-list-after").append("<li><img src='" + img64 + "' /></li>");
}