ブラウザでCanvasにExif Orientation （回転情報）のある画像を表示する

javascript

投稿日: 2025/11/07

更新日: 2025/11/10

ブラウザのCanvasを使ってExif Orientation （回転情報）のある画像を表示したり処理したりするときにはExif情報から回転を取得して自分で処理をしないといけないと思っていた。

しかし、コードを書いてみると特に処理しなくても勝手にExif Orientationを考慮した表示になっている。

Claudeに聞くと以下のような回答をもらった。

モダンブラウザの自動処理（2020年以降）
    - Chrome 81+ (2020年4月)
    - Firefox 77+ (2020年6月)
    - Safari 13.1+ (2020年3月)

  これらすべてでimage-orientation: from-imageがデフォルトになっています。

  ⚠️ 古いブラウザのサポートが必要な場合
  - Chrome 80以前、Firefox 76以前、Safari 13.0以前
  - これらをサポートする必要がある場合のみ、手動でEXIF処理が必要

どうやらブラウザが画像デコード時にビットマップを回転してくれるみたい（img.src = dataUrl）

昔の記事ばかりしか見当たらないのはどうやらそういうことみたい。

情報を探してみるがあまり見つからない。MDNはCSSに関する記述は見つけた。

https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/image-orientation

この辺関係ありそう

https://culage.hatenablog.com/entry/2020/05/14/000000_1

yosi

Noh を作ってるエンジニア。

Topへ戻る