使用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>");
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章