IOS 6.0またはiPhoneで、アップロード中にキャプチャされた写真が自動的に回転します
これを使用して1つのHTMLファイルコントロールがあり、サーバーにファイルをアップロードしようとしています。
- ファイルコントロールをクリックします
- ファイル/カメラを選択するためのダイアログが自動的に開きます。
- カメラを選択します
- 写真を撮って保存しました
- 今すぐフォームを送信
- 写真のキャプチャはサーバーに正常に保存されますが、90度回転します。
この問題はiPhoneまたはIOSでのみ発生します。
<input id="image" name="image" type="file" accept="image/*" capture style="width: 58px" />
カメラから撮影した場合の画像の自動回転を停止する方法を教えてください。
ありがとう、Imdadhusen
これは、画像内のEXIF/TIFFメタタグと関係がある可能性があります。
これらのタグの1つは、画像の向きを示します。サーバーにアップロードする写真（iPhoneなど）にはこれらのタグが付いているものと、ないもの（別のソース/ワークフローからのもの）があります。サーバーはこれらのタグを保持する場合と保持しない場合があり、画像の正しい向きを試みるためにタグを読み取る場合と読み取らない場合があります。同様に、Webブラウザはこれらのタグに注意を払う場合としない場合があります。タグを含む画像をアップロードすると、結果は確実に予測できなくなります。
これが問題であるかどうかを確認する良い方法は、サーバーから「問題のある」イメージと「良い」イメージをダウンロードして、それらを比較することです。それらをプレビューで開き、インスペクターの2番目のタブを確認します。メタ情報はそこに表示されます。一方の画像に向き情報があり、もう一方にはないかどうかを確認します。どちらもメタ情報を表示しない場合は、サーバーがメタ情報をすべて削除して使用していない可能性が高く、この回答を忘れることができます。
また、異なるブラウザで比較する必要があります。一部のブラウザはこの向きの情報を読み取り、それに応じて画像を回転させますが、そうでないブラウザもあります。
たとえば、ポートレートモードで撮影された私のiPhoneの写真には、次のメタタグがあります。
- ピクセルの高さ：2,448
- ピクセル幅：3,264
- 向き：6（90°CCW回転）
ネイティブビットマップの向きはlandscapeです。
「orientation」メタタグは、画像読み取りソフトウェアが表示のためにportraitに回転することを示します。
メタタグは、（一部の）画像ソフトウェアが画像を「正しく」縦向きに回転させるために使用しますが、画像を横向きとして表示する他のソフトウェアでは無視されます。
状況は混乱しており、これに関する確立された標準はありません（タグは単なるヒントです）。したがって、オンライン出版用の画像を準備する場合、アップロードする前に、これらのタグを取り除き、画像を正しいBITMAP方向に物理的に回転させるのが最も安全です。 。アプリのサーバー側を作成している場合は、サーバー上でこれを行うことができます。ただし、画像を正しい[〜＃〜]ビットマップ[〜＃〜]の向きで、向きのメタタグなしでWebブラウザに配信することが重要です。
どうしてこれなの？今日でも、ブラウザが異なればメタタグへのアプローチも異なります。
先ほど触れたiPhoneの画像は次のように表示されます。
Google Chrome 24 portrait
Safari 6 ポートレート
Firefox 17 風景
Opera 12 風景
素晴らしい状態ではありません！