画像と写真 · ブラウザー画像 & 描画エディター
携帯電話の写真を編集するときにブラウザが EXIF の向きを処理する方法
· 仕組み
画像編集 キャンバス ブラウザ処理
携帯電話は写真を横向きに保存することが多く、小さな方向タグを使用して閲覧者に写真の回転方法を指示します。この投稿では、そのタグとは何か、ブラウザがデコード中にそのタグをどのように適用するか、編集されたエクスポートでそのタグが必要なくなった理由について説明します。
携帯電話では縦向き、他の場所では横向きの写真 — 具体的な症状とその背後にある 8 値の EXIF Orientation タグ
まずは症状から始めます。携帯電話のギャラリーでは直立して見えるポートレートが、別のビューアでは横向きに表示されることがあります。 EXIF 方向はファイルに添付される命令で、フリップと 4 分の 1 回転を表す 8 つの値が指定されます。ここでの有用な証拠は、一般的なブラウザの約束よりも狭いものです。このエディタは、スコープされたオブジェクト URL から HTML 画像をロードし、デコードされた結果を描画しますが、すべてのブラウザがすべての向きの値をどのように処理するかを証明する手段はありません。
コピーした携帯電話の写真を試験片として使用します。表示された寸法を記録し、小さく切り取ってエクスポートし、2 番目のビューアでダウンロードを開きます。 Canvas エクスポートは、canvas.toBlob を通じて表示されたピクセルを PNG、JPEG、または WebP として再エンコードします。ソースコンテナをコピーしたり、EXIF を保持することを約束したりするものではありません。比較により、すべてのファイルが何をするかではなく、このラスターに何が起こったかがわかります。
横向きの結果が生じる可能性がありますが、このリポジトリは 8 つの EXIF 方向値を解析しません。
カメラはセンサー行を都合の良い物理的順序で記録しながら、それらの行をどのように表示するかについてのコンパクトな指示を保存できるため、不一致が存在します。その説明は、このアプリケーションに関する主張としてではなく、文脈として扱ってください。リポジトリは 8 つの EXIF 方向値を解析せず、画像がキャンバスに到達する前にどのブラウザのバージョンがそれらの値を適用するかを証明しません。
この制限により、実際のワークフローが変わります。オリジナルをそのままにして、複製を開いて、タグが正しく解釈されたと仮定するのではなく、デコードされた外観を判断します。エディターはラスター全体を 90 度ずつ回転できますが、方向メタデータを編集または復元することはできません。したがって、エクスポートは新しいピクセルの結果であり、重要なビューアでその動作を確認する必要があります。
カメラのストレージの理論的根拠はリポジトリの証拠の外にあります。実際のデコード結果を検査する
ブラウザーは、レンダリングされたピクセルにすでに反映されている方向指示を使用して画像をデコードする場合があります。最新の API は、createImageBitmap オプションを含むデコードの選択肢を公開できますが、このコード パスは createImageBitmap を呼び出したり、imageOrientation オプションを設定したりしません。オブジェクト URL から HTML 画像を作成し、その画像を描画するため、実際の電話ファイルとブラウザは実験の一部のままになります。
結果を 2 つの段階で検査します。最初はエディターで、次にエクスポート後です。文書で報告されている見かけの縦方向と幅と高さの両方に注意してください。最初のビューが間違っている場合は、手動で 4 分の 1 回転させると、作業中のラスターが正しく見えることがあります。最初の見解が正しい場合は、元のメタデータが普遍的に理解されていたと主張することは避けてください。リポジトリの証拠は、観察されたデコード結果のみをサポートします。
このエディターは HTML 画像をロードし、明示的な方向デコード オプションを設定しません。
ピクセルがキャンバスを通過して再度エンコードされると、ソース コンテナは配信されるオブジェクトではなくなります。エディターは、デコードされたピクセルをクロップおよびその他の表示可能な編集と合成し、PNG、JPEG、または WebP 出力の Canvas.toBlob を呼び出します。このプロセスでは、EXIF フィールドが保持されることは保証されません。特に、この実装では、後の閲覧者が解釈できるように方向タグを編集したり復元したりすることはできません。
ダウンロードの最も安全な説明は、この編集セッションで生成されたピクセルを含む画像です。共有する前に、別のビューアで再度開き、方向を確認してください。閲覧者が同意した場合、1 つの具体的なエクスポートが検証されたことになります。すべての EXIF 動作を認証したわけではありませんが、このファイルのあいまいなメタデータ命令をテスト可能なラスター結果に置き換えました。
キャンバスのエクスポートでは、表示されたピクセルが再エンコードされますが、どのメタデータ フィールドが残っているかは保証されません
メッセージ用のポートレートの電話写真を考えてみましょう。複製を開き、エディターで人物が直立して表示されるかどうかを確認し、トリミングする前にデコードされた寸法をメモします。シーンが横向きの場合は、作業イメージが目に見えて正しくなるまでラスターを 90 度ずつ回転し、修正後にのみトリミングします。この操作はピクセル編集であり、ファイルのメタデータの修復ではありません。
切り抜きをエクスポートし、2 番目の画像ビューアのエディター ビューと比較します。 PNG、JPEG、および WebP はキャンバスから生成されるため、出力は元の電話コンテナではなく、再エンコードされた画像になります。結果が運用上重要な場合は、使用した形式とビューアを記録します。この小規模な監査により、この肖像画に関する証拠が得られ、すべての携帯電話やブラウザーに関する裏付けのない約束は避けられます。
動作チェック: トリミングしてエクスポートする前に、デコードされた寸法と外観を比較します。
この調査には明確な境界があります。このエディターには、メタデータ インスペクター、EXIF エディター、または元の方向値を復元するツールは提供されません。また、方向メタデータを無視するビューアを正しく動作させることもできません。これらのジョブは、出力が平坦化されたラスターであるキャンバス ワークフローではなく、イメージ コンテナーを保存または書き換えるように設計されたソフトウェアに属します。
同じ注意が、キャプチャ時間、場所、カメラの詳細などの他の EXIF フィールドにも当てはまります。 Canvas エクスポートは、canvas.toBlob を通じてデコードされたピクセルを合成しますが、どのメタデータ フィールドが残るかは保証されません。これらのフィールドが重要な場合はオリジナルを保持し、表示される画像作業にはエディタを使用し、メタデータを保持する置換として扱う前にエクスポートされたファイルを検証します。
要点: 一度編集すればどこでも直立 — ブラウザ画像および図面エディタで編集すると、どのビューアでも同じように表示されるファイルが生成される仕組み
実際のポイントはシンプルですが、意図的に制限されています。表示されているラスターを編集し、エクスポートされた方向を別のビューアで確認します。ブラウザ画像および描画エディタは、ローカル電話の写真を開いたり、ラスター全体を 90 度ずつ回転したり、トリミングしたり、PNG、JPEG、または WebP ダウンロードを作成したりする場合に便利です。そのローダーとエクスポート パスは、ユニバーサル EXIF 処理の主張を正当化するものではありません。
信頼性の高いチェックには 1 分もかかりません。ソースを保持し、コピーを開いて、最初の方向と寸法を記録し、小さな編集を 1 回行い、エクスポートを 1 回行い、ダウンロードした内容を別の場所で検査します。ファイルが間違っている場合は、コピーに戻ってピクセルを手動で修正します。ここで方向タグを復元できるとは考えないでください。検証結果は実際に開いて確認したファイルです。