繁體中文

圖片和照片 · 瀏覽器圖片和繪圖編輯器

編輯手機照片時瀏覽器如何處理 EXIF 方向

· 工作原理

圖片編輯 帆布 瀏覽器處理

抽象光柵插圖,說明編輯手機照片時瀏覽器如何處理 exif 方向
原始 ToolAcre 向量圖

手機通常會橫向保存照片,並依靠一個微小的方向標籤來告訴觀眾如何旋轉它們。這篇文章解釋了該標籤是什麼,瀏覽器在解碼過程中如何應用它,以及為什麼編輯後的匯出不再需要它。

手機上直立而其他地方橫著的照片 — 具體症狀及其背後的八值 EXIF 方向標籤

從症狀開始:在手機圖庫中看起來是直立的肖像在另一個檢視器中可能是橫向的。 EXIF 方向是附加到檔案的指令,有八個可能的值描述翻轉和四分之一圈。這裡的有用證據比一般瀏覽器的承諾要窄:這個編輯器從範圍物件 URL 載入 HTML 圖片,繪製解碼結果,並沒有固定裝置證明每個瀏覽器如何處理每個方向值。

使用複製的手機照片作為測試樣本。記錄其顯示的尺寸,進行小裁剪,將其匯出,然後在第二個檢視器中開啟下載。 Canvas匯出透過canvas.toBlob將顯示的像素重新編碼為PNG、JPEG或WebP;它不複製來源容器或承諾保留 EXIF。比較會告訴您該柵格發生了什麼,而不是每個檔案都會做什麼。

可能會出現橫向結果,但此儲存庫不會解析八個 EXIF 方向值

存在不匹配是因為相機可以以方便的物理順序記錄感測器行,同時儲存有關如何呈現這些行的緊湊指令。將該解釋視為上下文,而不是有關本申請的宣告。該儲存庫不會解析八個 EXIF 方向值,也不會證明在圖片到達畫布之前哪些瀏覽器版本應用了它們。

此限制改變了實際工作流程。保持原件不變,打開副本,並判斷解碼後的外觀,而不是假設標籤已被正確解釋。編輯器可以以九十度為單位旋轉整個柵格,但無法編輯或還原方向元資料。因此,匯出是一個新的像素結果,應在對您重要的檢視器中檢查其行為。

相機儲存原理是外部儲存庫證據;檢查實際解碼結果

瀏覽器可以使用已反映在渲染像素中的方向指令來解碼影像。現代 API 可以公開解碼選擇,包括 createImageBitmap 選項,但此程式碼路徑不會呼叫 createImageBitmap 或設定 imageOrientation 選項。它從物件 URL 創建 HTML 圖片並繪製該圖片,因此實際的手機檔案和瀏覽器仍然是實驗的一部分。

分兩個階段檢查結果:首先在編輯器中,然後在匯出後。請注意檔案報告的明顯縱向以及寬度和高度。如果第一個視圖是錯誤的,手動四分之一轉可以使工作光柵看起來正確。如果第一種觀點是正確的,請避免聲稱原始元資料已被普遍理解;儲存庫證據僅支援觀察到的解碼結果。

此編輯器載入 HTML 圖片並設定沒有明確方向解碼選項

一旦像素穿過畫布並再次編碼,來源容器就不再是正在傳遞的物件。編輯器將解碼後的像素與您的裁剪和任何其他可見編輯合成,然後呼叫 canvas.toBlob 進行 PNG、JPEG 或 WebP 輸出。該過程不承諾保留 EXIF 欄位。特別地,該實作不能編輯或恢復方向標籤以供稍後的查看者解釋。

最安全的下載描述是包含此編輯會話產生的像素的圖片。在另一個檢視器中重新打開它並在共享之前檢查方向。如果該查看者同意,則您已驗證一項具體匯出。您尚未驗證所有 EXIF 行為,但已將此檔案的不明確元資料指令替換為可測試的光柵結果。

Canvas 匯出重新編碼顯示的像素,但不證明保留哪些元資料欄位

考慮一張用於傳送訊息的手機肖像照片。打開副本,觀察編輯器是否以直立方式顯示人物,並在裁剪前記下解碼的尺寸。如果場景是側面的,則以九十度為步長旋轉光柵,直到工作影像明顯正確,然後僅在校正後進行裁剪。該操作是像素編輯,而不是對檔案元資料的修復。

匯出裁切並與第二個影像檢視器中的編輯器視圖進行比較。 PNG、JPEG 和 WebP 是從畫布產生的,因此輸出是重新編碼的圖片,而不是原始手機容器。如果結果對操作很重要,請記錄所使用的格式和檢視器。這個小型審計為您提供了有關此肖像的證據,同時避免了對每部手機或瀏覽器的不受支援的承諾。

工作檢查:在裁剪和匯出之前比較解碼的尺寸和外觀

這項調查有明確的界線。此編輯器不提供元資料檢查器、EXIF 編輯器或用於復原原始方向值的工具。它也無法使忽略方向元資料的檢視器正確運作。這些作業屬於旨在保存或重寫影像容器的軟體,而不屬於輸出為展平光柵的畫布工作流程。

同樣的注意事項也適用於其他 EXIF 欄位,例如拍攝時間、位置和相機詳細資訊。 Canvas 透過 canvas.toBlob 匯出複合解碼像素,並不驗證保留哪些元資料欄位。如果這些欄位很重要,請保留原始檔案,使用編輯器進行可見影像工作,並在將匯出的檔案視為保留元資料的替換檔案之前驗證匯出的檔案。

重點:編輯一次,到處直立 — 在瀏覽器圖片和繪圖編輯器中進行編輯如何產生在每個檢視器中顯示相同的檔案

實際要點很簡單,但故意進行限制:編輯可見光柵,然後在另一個檢視器中驗證匯出的方向。瀏覽器圖片和繪圖編輯器對於打開本地手機照片、以九十度為單位旋轉整個光柵、裁剪它以及產生 PNG、JPEG 或 WebP 下載非常有用。它的載入程式和匯出路徑並不能證明通用 EXIF 處理的合理性。

可靠的檢查只需不到一分鐘。保留原始程式碼,開啟副本,記錄初始方向和尺寸,進行少量編輯,匯出一次,然後在其他地方檢查下載。如果檔案錯誤,返回副本並手動修正像素;不要假設可以在此處恢復方向標籤。驗證的結果是您實際開啟並檢查的檔案。