影像與照片·社交影像調整器
瀏覽器影像大小調整運作原理：Canvas、drawImage 與重新取樣
· 工作原理
影像大小調整 帆布 瀏覽器處理
瀏覽器可以解碼照片，以新尺寸將其繪製到畫布中並對結果進行編碼，所有這些都無需伺服器。這篇文章遵循該流程，解釋了品質的優劣，並說明了為什麼唯一的大小限制是裝置的記憶體。
沒有上傳，沒有伺服器，仍然調整大小 - 當頁面縮小 20 兆像素照片時工作發生在哪裡的具體問題
照片可以透過 1350 變成 1080 肖像，而無需存取影像處理伺服器。 Social Image Resizer 從瀏覽器選擇器接收檔案，驗證其 MIME 類型和大小，然後呼叫 createImageBitmap。解碼後的點陣圖仍然是每個選定輸出的來源，因此一個本地物件可以提供多個不同形狀的畫布。
可見光預覽並不是隱藏在網路請求後面的最終匯出。它是相同取景狀態的較小畫布渲染：目標比例、縮放、偏移、適合模式和背景。稍後匯出會重複以預設尺寸渲染、對 Blob 進行編碼並將 Blob 傳遞給頁面中的下載控制項。
解碼是本地的，但此工具也強制執行 40 MB 輸入限制
此計畫表示裝置記憶體是唯一的實際邊界，但附帶的輸入路徑也有明確的 40 MB 檔案限制。 JPEG、PNG 和 WebP 被接受；其他類型在解碼前被拒絕。在該門之後，createImageBitmap 要求瀏覽器將壓縮檔案位元組轉換為畫布可用的寬度、高度和解碼像素。
解碼像素比壓縮檔案佔用更多內存，並每個輸出畫布都需要自己的分配。因此，渲染器在建立畫布之前調用共享像素預算保護。這是第二個以裝置為導向的約束，不允許承諾 40 MB 下面的每個檔案都適合每台機器上的每個請求的輸出。
當輸出畫布剪輯溢位時，drawImage 會縮放定位的完整位圖
ToolAcre 不會計算來源裁切矩形並將八個來源和目標參數傳遞給drawImage。它根據來源尺寸和目標尺寸計算比例，定位整個縮放後的點陣圖，並將其繪製到畫布上，畫布的邊緣會遮蔽任何溢出。在封面模式下，剪裁就是裁切；在包含模式下，整個點陣圖仍然可見。
這個差異很重要，因為裁切和調整大小不是同義詞。調整大小會變更點陣圖取樣的尺寸。裁剪會刪除有限輸出幀以外的所有內容。一個drawImage呼叫可以參與這裡的兩種效果，但是裁剪是透過幀幾何和剪輯產生的，而不是透過先重寫原始檔來產生的。
引擎蓋下的重新取樣 - 平滑設定、「高品質」提示要求瀏覽器做什麼，以及為什麼瀏覽器之間的結果略有不同
在繪製之前，渲染器啟用 imageSmoothingEnabled 並將 imageSmoothingQuality 設為高。這些是瀏覽器畫布控件，而不是對命名 Lanczos、bicubic 或其他核心的請求。此實作無法保證跨引擎提供相同的樣本，因為 API 公開了品質提示而不是瀏覽器的確切係數表。
有用的比較保持來源、輸出尺寸和瀏覽器固定，然後檢查對角線邊緣、細線和重複紋理。如果另一個瀏覽器略有不同，並不表示目標比率發生了變化。這意味著相同的幾何請求透過不同的畫布實現，這正是本文避免發明效能或品質百分比的原因。
對輸出進行編碼 — 將畫布轉回編碼影像檔案並提供下載
當方法存在時，匯出畫布會經由 OffscreenCanvas.convertToBlob 變成 Blob，否則為 HTMLCanvasElement.toBlob。使用者選擇 JPEG、PNG 或 WebP。儘管 PNG 不像 JPEG 和 WebP 那樣使用有損品質控制，但仍向編碼器提供品質值。結果位元組數是測量的，而不是估計的。
對於多個選定的目標，工具會依序建構每個 Blob，顯示其實際尺寸和測量的大小，並可以將已編碼的檔案打包為 ZIP。 ZIP 儲存在這裡並不能改善影像壓縮；內容指出這些格式已經被壓縮。單獨的下載和存檔均源自本地建立的位元組。
此實作在主執行緒上執行匯出工作，而不是在 Web Worker 中
工作手冊稱繁重的工作通常在 Web Worker 中執行，但該應用程式將裁剪和渲染函數直接匯入 main.js 中，並循環訪問那裡的目標。檢查的路徑中沒有建立任何Worker。該頁面仍然可以用於普通作業，但必須觀察回應能力，而不是歸因於不存在的體系結構。
網路隔離有兩種證據支持。核心測試無需嘗試就安裝了網路防護並框架每個預設，而產品記錄標記在本地處理。執行時網路面板檢查可以新增部署證據。它應該將圖片上傳與普通頁面資產或公開的分析區分開來，而不是聲稱整個頁面沒有發出請求。
本文未涵蓋的內容 — GPU 加速的大小調整庫和伺服器端影像管道
該路線有意建構在瀏覽器基元上，而不是 GPU 庫或遠端媒體管道上。它不公開可選擇的重採樣核心、基準替代演演算法或承諾加速批次。一張來源影像產生多種裁切；許多不相關的來源檔案屬於不同的工作流程。
這些排除使承諾保持可測試性。該程式碼驗證了檔案驗證、點陣圖解碼、算術成幀、畫布繪製、Blob 編碼和下載彙編。它沒有證明伺服器集區如何調整相同像素的大小或瀏覽器可以在內部選擇哪個 GPU 路徑。宣告僅止於所使用的可觀察的 Web API。
重點：您的瀏覽器已經內建了一個縮放器 - Social Image Resizer 會為您驅動它，裁剪並縮放到平台的寬高比，而無需上傳檔案
瀏覽器已經提供了基本的操作，但有用的結果取決於它們周圍的正確幾何形狀。 Social Image Resizer 選擇覆蓋的最大比例、包含的最小比例、夾緊移動、單獨預覽安全區域指導並以精確的目標尺寸匯出。這種編排將低階繪圖 API 轉變為可重複的社交資產工作流程。
使用原始圖片而不是之前縮小的副本來測試管道。選擇目前的工具預設或自訂比例，移動主題，匯出一次並檢查下載的尺寸。證據是您收到的本機檔案以及產生該檔案的程式碼路徑，而不是聲稱每個瀏覽器都使用相同的隱藏重採樣器。