在上傳之前使用JavaScript 調整客戶端圖像大小

在上傳到伺服器之前，在客戶端調整圖像大小具有多種優勢。它可以減少伺服器負載，加快頁面渲染速度，並提供更好的使用者體驗。

客戶端 JavaScript 圖片大小調整可能嗎？

是的，可以使用 JavaScript 調整客戶端圖片大小。有一些開源演算法可以在不借助 Flash 的情況下調整大小。

客戶端影像調整大小演算法

GitHub 上提供了一個這樣的演算法：https： //gist.github.com/dcollien/312bce1270a5f511bf4a。它包括 ES6 和 vanilla JavaScript 版本，可以嵌入到任何 Web 應用程式中。

用法範例

要使用演算法：

1. 將提供的 JavaScript 程式碼嵌入到您的網頁中。
2. 定義檔案選擇的輸入並指定用於顯示調整大小的影像的影像標籤。
3. 在輸入的 onchange 事件偵聽器中，呼叫演算法提供的調整大小函數。指定所需的尺寸和回呼函數。
4. 回呼函數將接收調整大小的 blob 和指示調整大小是否成功的標誌。
5. 使用傳回的 blob 設定 blob 的 src 屬性用於預覽調整大小的影像的影像標籤。

功能

• 支援 ES6 和 vanilla JavaScript。
• 自動偵測瀏覽器功能並套用polyfills以獲得最佳相容性。
• 忽略動畫GIF影像以保持其完整性。