圖像和照片 · 瀏覽器圖像和繪圖編輯器
瀏覽器圖像編輯器中裁剪的工作原理：畫布和像素
· 工作原理
圖像編輯 畫布 瀏覽器處理
裁剪看起來微不足道，但瀏覽器編輯器必須解碼文件，將像素矩形複製到畫布上並編碼全新文件。這篇文章將逐步介紹每個步驟，並解釋哪些內容發生了變化，哪些內容保持不變。
為什麼裁剪後的照片是一個新文件，而不是修剪過的舊文件 - 裁剪不能簡單地從 JPEG 或 PNG 中刪除字節，因此編輯器會解碼並重新編碼
JPEG 儲存壓縮影像數據，而不是每個可見行一個獨立可刪除的位元組範圍。從末尾刪除位元組會損壞文件，而不是修剪照片。因此，瀏覽器編輯器會對圖片進行解碼，選擇一個矩形並建立新的編碼檔案。原件保留在您的磁碟上。如果您需要可逆編輯，請保留來源座標和選擇座標：匯出的裁切不包含遺失的像素。
將影像解碼為點陣圖 — 在選擇任何內容之前，瀏覽器如何將壓縮位元組轉換為 RGBA 像素的寬度 × 高度網格
瀏覽器將壓縮的 JPEG、PNG 或 WebP 轉換為具有寬度 × 高度樣本的點陣圖。 4000×3000 的圖像在任何裁剪之前代表 1200 萬像素，每個像素幾個位元組可能會使其記憶體佔用量比磁碟上的檔案大得多。 ToolAcre 在分配非常大的工作空間之前檢查圖片和畫布限制。您在螢幕上看到的內容可能會縮放以適合視口；在複製像素之前，裁剪矩形仍必須映射回圖像座標。
選擇矩形：來源座標和目標座標——drawImage 如何將選定區域複製到目標大小的畫布上，以及舍入到整個像素意味著什麼
矩形是原點 (x,y) 加上寬度和高度（以來源像素為單位測量）。 ToolAcre 將該矩形限制在文件邊界內，並裁剪每個可見層，而不僅僅是合成預覽的螢幕截圖。它為每一層建立一個目標畫布，並使用九個參數呼叫drawImage：來源畫布、來源矩形、目標原點和目標大小。在來源尺寸和目標尺寸相同的情況下，無需調整大小步驟即可選擇像素。小數位指針位置被舍入或固定為可表示的畫布像素。
將結果編碼回檔案 - 為什麼匯出步驟決定格式和質量，以及為什麼裁剪本身是準確的，而編碼可能不準確
導出是與裁剪分開的操作。編輯後的畫布可以編碼為 PNG、JPEG 或 WebP，具體取決於選項和瀏覽器支援。 PNG 可以保留提供給無損編碼器的像素；即使精確選擇了矩形，JPEG 也會丟棄一些細節，並且在使用不含 Alpha 的格式時，透明度需要特意設定背景。新檔案也可以省略來源元資料或顏色訊息，因此切勿將其描述為原始檔案的逐位元組子集。
工作範例：將 4000×3000 照片裁切為 1600×900 橫幅 — 透過解碼、複製和匯出追蹤像素計數
對於擁有 4000×3000 照片的博主，居中的 1600×900 橫幅從 x=1200 和 y=1050 開始。 drawImage 將第 1200 到 2799 列和第 1050 到 1949 行複製到 1600×900 輸出：1.44 百萬像素而不是 1200 萬像素。如果您要求編輯器將整個照片縮小到 1600×900，您會變更其縱橫比並重新取樣，而不是進行裁剪。在記憶體有限的手機上，編輯器可能會先減少非常大的輸入，因此在重複這些座標之前檢查顯示的尺寸。
導出的作物無法從原始圖片中恢復什麼
這不是無損 JPEG 區塊裁剪：應用程式繪製像素並匯出新容器。關閉原始檔案後，匯出的 1600×900 檔案也無法恢復丟棄的邊距。分層編輯文件又有所不同：裁剪作用於文件圖層，而匯出將它們合成到下載的影像中。對於敏感材料，裁剪邊距比僅繪製不透明覆蓋層更安全，但要檢查匯出的像素並保持原始像素的隱私。
重點：精確像素、新容器 - 為什麼瀏覽器裁剪是精確的以及瀏覽器圖像和繪圖編輯器如何在不上傳文件的情況下執行它
瀏覽器裁剪精確地決定要保留哪些解碼像素，而所選的編碼器則控制下載的檔案。瀏覽器圖像和繪圖編輯器在您的裝置上執行這兩個步驟：載入圖片、選擇矩形、套用裁切和匯出。網路在這兩個步驟中都不需要照片字節，但網站資產和公開的 AdSense/分析請求不應與 DevTools 中的檔案上傳混淆。