使用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>");
}