影像與照片·影像轉換器和壓縮器
Web Workers 和 OffscreenCanvas 如何保持影像轉換反應能力
· 工作原理
瀏覽器處理 帆布 網路工作者
對大圖片進行編碼需要真正的 CPU 時間，並在主執行緒上執行此操作會凍結頁面。這篇文章解釋了 Web Workers 和 OffscreenCanvas 如何將這些工作移出 UI 執行緒，以及該架構對於隱私和限制意味著什麼。
會凍結的分頁 — 當在繪製頁面的執行緒上執行大量編碼時會發生什麼
批次解碼、重繪和編碼需要 CPU 工作和解碼像素記憶體。如果每個操作都在處理控制項、進度更新和繪畫的相同事件循環中執行，則介面可能會停止回應，直到檔案完成。因此，當第一次轉換開始時，聚焦面板會懶惰地創建一個模組工作人員，而不是為從未轉換的訪客支付啟動成本。
響應性是一個架構目標，而不是承諾的計時數字。裝置負載、圖片尺寸、瀏覽器實作和批次組合仍然決定頁面的流暢程度。使用重要裝置上的代表性檔案進行驗證；不要發布通用轉換期限或聲稱工人免費提供昂貴的工作。
主執行緒及其珍貴的原因 — 一個執行緒用於佈局、輸入和腳本，以及任務阻塞這三個執行緒的時間
主執行緒擁有 DOM 和訪客觸碰的控制項。 ToolAcre 使用它來驗證選擇、簡要解碼來源尺寸、建置設定、渲染狀態和下載結果。批次的重複解碼、畫布繪製和編碼循環位於 `image.worker.js` 後面，允許在檔案之間返回進度訊息。
工作執行緒不會消除每個主執行緒任務。每個選定的檔案最初都會在面板中進行檢查和測量，然後將結果轉換為預覽和下載操作。該設計將重複的繁重管道從介面所有權中移開，同時將瀏覽器 API 和表示保留在各自所屬的上下文中。
Web Workers：沒有 DOM 的第二個執行緒 — Worker 可以接觸什麼、不能接觸什麼，以及檔案如何傳輸到它
工作人員沒有普通的 DOM 存取權限。它接收可序列化的項目描述、設定和每個檔案的 ArrayBuffer。對於每個項目，它都會建立與介面使用的相同的純轉換計劃，創建 Blob，執行解碼-繪製-編碼，將產生的 Blob 轉換為位元組並記錄每個檔案的失敗，而不放棄批次的其餘部分。
這種隔離也影響了錯誤處理。損壞的檔案可以進入失敗數組，而後面的專案繼續。工作人員檢查專案之間的取消情況並使用目前檔案名稱報告進度。使用者介面將工作超時轉換為建議嘗試更少或更小的圖片，而不是留下一個禁用按鈕而不做任何解釋。
OffscreenCanvas：在沒有可見元素的情況下進行繪製和編碼——工作人員如何取得自己的畫布並呼叫convertToBlob
`createCanvas` 優先於 `OffscreenCanvas`。在該路徑內，`encodeCanvas` 使用目標 MIME 類型和選用品質呼叫 `convertToBlob`。相同的渲染器還可以建立 HTML 畫布並使用基於回呼的 `toBlob`，為 OffscreenCanvas 不可用的上下文保留後備。
準確描述後備非常重要。 OffscreenCanvas 是首選，而不是來源中唯一可能的畫布。同樣，瀏覽器 WebP 編碼由最終編碼結果檢查，而不是根據解碼支援假定。當請求的編碼器無法產生格式時，應用程式承諾會出現錯誤，而不是用另一種 MIME 類型進行靜默替換。
可傳輸與複製 — 將 ImageBitmap 或 ArrayBuffer 移到背景工作執行緒而不複製數十兆位元組
在呼叫工作程序之前，面板將每個檔案讀入 ArrayBuffer 並將這些緩衝區包含在傳輸清單中。所有權轉移給工作人員，而不是克隆每個輸入緩衝區。編碼後，工作程序將 Blob 位元組包裝在 Uint8Array 中，並註冊該後備緩衝區以便在回應路徑上傳輸。
這減少了可避免的複製，但解碼的圖片和畫布仍然佔用記憶體。 `executePlan` 關閉 `finally` 區塊中的每個 ImageBitmap，以便可以立即釋放其解碼的像素。可轉移、顯式位圖清理和像素預算保護解決了不同的壓力源；沒有人授權無限批量索賠。
為什麼這個架構也是隱私故事 - 整個管道都在你的分頁中，而網路面板保持沉默
轉換程式碼呼叫瀏覽器圖片和畫布 API，無需檔案上傳請求。單元測試保護每個受支援的輸入輸出組合的規劃，並禁止網路存取。配置的隱私權宣告相應地狹窄：工具代碼不會發出攜帶檔案、貼上文字或產生輸出的請求。
頁面本身仍然可以載入網站資源和公開的外部腳本，因此「靜默網路面板」需要解釋。載入後清除 DevTools，並在新請求中尋找獨特的無害測試檔案名稱或有效負載位元組。原始碼審查和執行時觀察共同支援關於轉換路徑的宣告；兩者都不會將整個瀏覽器環境變成離線沙箱。
限制從何而來 - 記憶體和畫布上限取代了上傳上限，因此上限是您的裝置
本機處理以輸入驗證、解碼像素、畫布分配和可用裝置記憶體的限制取代了上傳限制。每個輸入檔都由焦點面板限制在 40 MB 處。計劃的輸出幾何形狀適合裝置像素預算，當該警衛更改請求時，用戶會收到一條警告，指出縮小的尺寸。
配置中沒有固定的批次計數。二十張小圖片和二十張高解析度照片不是等價的分配。手機可能比桌上型電腦更早出現故障。真實的操作建議是在逾時或記憶體故障後處理更少或更小的檔案，而不是發布不支援的最大計數或百萬像素上限。
重點：繁重的工作、安靜的介面 - 影像轉換器和壓縮器如何在裝置上的主執行緒之外執行轉換
介面保持更安靜，因為重複的管道在工作執行緒中執行，其畫布可以在螢幕外，並大位元組緩衝區作為可傳輸檔案傳輸。這些是具體的來源屬性，而不是行銷速記。他們解釋了工作發生在哪裡以及進度如何返回，但沒有聲稱每個瀏覽器都以相同的方式安排工作。
使用您的工作流程實際使用的影像測試架構。在轉換過程中觀察控件，確認每個檔案的進度，檢查故障並檢查網路面板的測試標記。 ToolAcre 的設計為您提供了可觀察到的證據：真正的工作模組、測量的輸出和本地下載字節，而不是不透明的遠端作業。