這里的<img>標(biāo)簽是用來預(yù)覽圖片的：

<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進(jìn)行圖片的壓縮：

function compress() {
    let canvas = document.createElement('canvas');
    let context = canvas.getContext('2d');
    let width = img.width;
    let height = img.height;
    //如果圖片大于四百萬像素，計(jì)算壓縮比并將大小壓至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);
    //圖片預(yù)覽
    image.src = base64;
}

我們比較兩張圖片壓縮前后的區(qū)別：

compare.png