web-dev-qa-db-ja.com

Safari MobileのEXIFオリエンテーションの問題

私はangular 2プロダクション環境でプロファイル写真を選択できる2つのアプリケーションを持っています。最近、特にIOS 13.3.1 version(older)とIOS 13.4.1(new)version。使用しているSafariブラウザのバージョンに応じて、画像が回転して表示されることに気付きました( 私はこのためにStackblitzをビルドしました)確認できます ):

IOS 13.3.1バージョン(古い)

enter image description here

IOS 13.4.1(新規)

enter image description here

IPhoneのポートレートモードで画像を取得してアプリにアップロードすると、 IOS 13.3.1 version(older)。ただし、各デバイスのEXIFメタ情報画像を調べたところ、両方の画像のorientationプロパティの値が同じであることがわかりました。

IOS 13.3.1バージョン(古い)

enter image description here

IOS 13.4.1(新規)

enter image description here

私の質問です。 IOSバージョンによって、画像の表示が変わるのはなぜですか。どちらの場合も、EXIFの方向が同じ値(6)であることを知っています)?

これは、EXIFの向きの値に応じて画像を回転させて正しく表示することでこの問題をすでに解決しているため(例えば、exifの向きのフラグを検出してこの状況を処理するためにexif.jsが作成されている)、この問題が心配です。新しいバージョンのIOSで再び表示されるようになりました。時間をかけて持続可能にするために使用できるコードの例は何ですか?画像の向きを管理するためのブラウザー間の合意はありませんか?

この非論理的な振る舞いの説明は何ですか?

どうもありがとうございます!

4
AlejoDev

Webkitブラウザーは、EXIFデータに基づいてアップロードする前に画像を回転させ、その後、アプリによって再度適用されます。 Chromeおよび13.4のMobile Safariの新しい(81)バージョンでこれを確認できました。その後、アプリがさらに回転し、ねじれます。

3
Philip Luke

また、携帯電話の動作が突然変わったときにこの問題に遭遇し、最終的にこの問題の根本的な原因を突き止めました。

WebKit(iOS)とAndroid(Chrome)の両方がimage-orientation CSSプロパティのデフォルトの動作を最近変更しました。以前はnoneでしたが、現在はfrom-imageです。 。これは、以前は画像のEXIFデータをデフォルトで無視していたのに対し、現在は画像の自動補正に使用しているため、exifreaderライブラリに基づく独自の自動補正が機能しなくなりました。

ここにいくつかの関連リンクがあります:

面白いことに、Slackチームもこれに遭遇したようです。

さいわい、exifreaderライブラリの作成者(数週間後に同じ問題が発生した)も、この動作を検出する方法を教えてくれました。あなたは彼の答えをここで見つけることができます:

また、Modernizrがこのテストを行っていることにも気付いたので、実際にはカスタムのmodernizrビルドを使用して、ブラウザーの動作を検出しています。

2
waldgeist