使用Canvas實現前端圖片壓縮

前言：有些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>");
}