使用JavaScript 在客戶端調整圖像大小：開源解決方案

在當今的Web 開發環境中，通常需要在客戶端調整圖像大小之前將它們上傳到伺服器。這種方法可以優化影像質量，減少伺服器負載，並透過加快頁面載入時間來改善使用者體驗。

雖然 Flash 是調整圖片大小的常見選項，但許多開發人員寧願避免使用它。幸運的是，有一個利用 JavaScript 有效調整圖片大小的解決方案。

開源影像調整大小演算法

GitHub 上提供的開源演算法（https://gist .github.com/dcollien/312bce1270a5f511bf4a）提供了一種可靠的客戶端調整圖像大小的方法。它提供了 ES6 版本和 .js 版本，可以包含在腳本標籤中。

實作

若要實現調整大小演算法，請依照下列步驟操作：

1. 新增如下所示的HTML程式碼：

2. 新增下列 JavaScript 程式碼：

document.getElementById('select').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};

功能和支持

該演算法擁有一系列功能和支持，包括：

• 根據指定的最大寬度調整大小和高度
• 支援檢測和填充以實現跨瀏覽器相容性
• 排除動畫GIF 以提高效率