图片上传压缩预览

这里的<img>标签是用来预览图片的：

<input id="upload" type="file" accept="image/*">
<img id="image" src="" alt="" />

读取上传文件：

let upload = document.querySelector('#upload');
let image = document.querySelector('#image');
let img = new Image();
let base64 = "";
upload.addEventListener('change', function (e) {
    let file = e.target.files[0];
    let reader = new FileReader();
    reader.onload = function (e) {
        let result = e.target.result;
        img.src = result;
        //压缩
        img.onload = compress;
    };
    reader.readAsDataURL(file);
});

利用canvas进行图片的压缩：

function compress() {
    let canvas = document.createElement('canvas');
    let context = canvas.getContext('2d');
    let width = img.width;
    let height = img.height;
    //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
    let ratio;
    if ((ratio = width * height / 4000000) > 1) {
        ratio = Math.sqrt(ratio);
        width /= ratio;
        height /= ratio;
    } else {
        ratio = 1;
    }
    canvas.width = width;
    canvas.height = height;
    context.fillStyle = "#fff";
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.drawImage(img, 0, 0, width, height);
    base64 = canvas.toDataURL('image/jpeg', 0.1);
    //图片预览
    image.src = base64;
}

我们比较两张图片压缩前后的区别：

compare.png