如何在不使用 Flash 的情況下使用 JavaScript 在客戶端調整圖像大小？

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

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

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

開源圖像調整大小演算法

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

實作

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

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

<code class="HTML"><input type="file" id="select">
<img  id="preview" alt="如何在不使用 Flash 的情況下使用 JavaScript 在客戶端調整圖像大小？" ></code>

2. 新增以下JavaScript 程式碼：

<code class="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.
    });
};</code>

功能與支援

功能與支援

• 該演算法擁有一系列功能和支持，包括：
• 根據指定的最大寬度和高度調整大小

支援偵測和用於跨瀏覽器相容性的填充排除動畫GIF 以提高效率

以上是如何在不使用 Flash 的情況下使用 JavaScript 在客戶端調整圖像大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！