上次我們用 C# 來實作圖片壓縮的功能。今天我們換嘗試用 JavaScript 在前端幫我們做圖片壓縮！

通常圖片壓縮的目的就是要讓檔案的大小變小，所以我們可以從，圖片的長寬尺寸作縮小，又或是降低圖片的品質(減少詳細資料)來達到檔案縮小。

首先我們用 Input 的方式來取得圖片，並偵測若選擇了圖片，就進行後續動作。

<input type="file" id="file">
<script>
let fileInput = document.getElementById('file');
fileInput.addEventListener('change', selectFile);

imageType = "";

function selectFile() {
    let file = fileInput.files[0];

    if (!file.type.startsWith('image/')) {
        console.log("不是圖片格式");
        return;
    }

    imageType = file.type;
    readFile(file);
}
</script>

確定圖片格式沒問題後，接下來開始讀取圖片檔案，讀取成功後呼叫轉檔方法並設定下載按鈕。

function readFile(file) {
    let reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = function (event) {
        let blob = new Blob([event.target.result]);  
        window.URL = window.URL || window.webkitURL;
        let blobURL = window.URL.createObjectURL(blob);  

        let image = new Image();
        image.src = blobURL;
        image.onload = function () {
            console.log(image)
            let newImage = resize(image);
            setDownload(newImage);
        }
    }
}

讀取完之後，就可以開始進行轉檔。轉檔的方式就是透過canvas幫我們把圖片重新繪製大小。

function resize(image) {
    let canvas = document.createElement('canvas');
    // 畫布大小為圖片的 0.9 倍
    canvas.width = image.width * 0.9;
    canvas.height = image.height * 0.9;
    let ctx = canvas.getContext("2d");
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height); // 把圖片畫在畫布上(0,0)作標到(canvas.width,canvas.height)

    let newImg = canvas.toDataURL(imageType, 0.8); // 0.8是圖片壓縮比
    return newImg;
}

function setDownload(newImg) {
    let download = document.getElementById("download");
    let fileName = imageType.replace('/', '.');

    download.setAttribute("download", fileName);
    download.setAttribute("href", newImg);
}

參考資料
https://stackoverflow.com/questions/14672746/how-to-compress-an-image-via-javascript-in-the-browser

https://github.com/josefrichter/resize/blob/master/public/preprocess.js

https://www.wfublog.com/2019/06/js-compress-resize-image-canvas.html?fbclid=IwAR1X2k_P6onrBST89Q0_S3d36o23kFYYGCgGe_J73u1K83cf4oT8xtp1ykA