昨日と比べて涼しい風がない分、若干の暑さを感じる北海道のお昼、皆さまいかがお過ごしでしょうか。
自己紹介を書く前にDtubeに登録して、試しにYoutubeにアップロードしていた動画を投稿してみたのが普通に自分の投稿の最初に出てきていて、あー連携されているんだなぁと改めて感じました。
閑話休題
自己紹介やそのあとの記事にiPhoneで撮影した画像を挿入したところ、意図しない方向に回転した状態で表示されてしまったので、このまま記事が残るのはイカンと思い、この画像の回転について調べてみました。
すでに皆さま周知のことと思いますが、これから新しくsteemitを初めようとしている方や私自身の為に(ぇ)残しておこうと思います。
【現象】
steemitに投稿した画像が意図しない方向に回転して表示される。
【検証機材】
iPhone6(いい加減買い換えたい)
【検証内容】
iPhoneを回転させながら撮影し、投稿、画像の向きがどう変わるかを確認する。
1.まずはよく撮影する以下のポジションでパチリ。
右手にカメラを持ちつつなので変な持ち方をしていますが、この状態で撮影した画像を投稿すると。。。
こうなります。普通ですね。
2.では次にこれもよく撮影するポジション、iPhone縦位置でパチリ。
それを投稿した画像がこちら。
90度反時計回りに回転しています。
3.今度は以下のポジション。1.の上下逆さまバージョン。
投稿すると。
あらあら、上下反転してしまいました。
【原因】
iPhoneの撮影時、「シャッターボタンが右の位置を0度」として、「この画像は〇〇度回転して表示してね」という情報が画像に書き込まれるが、その指示をブラウザがうまく解釈できないため。
【解説】
iPhoneは「シャッターボタンを右にして撮影」した画像を基準(回転なし)としています。
↑のポジションですね。
それ以外のポジションで撮影すると、↑のポジションを基準にして「〇〇度回転させて表示してね」という情報をExif情報に付加します。
※Exif情報～撮影日時や撮影状況(シャッタースピード・F値など)を画像に付加する規格
例えば以下のポジションの場合。
「シャッターボタンが左の時に撮影しているから、基本のポジション(シャッターボタンが右)の反対だ！この画像は基本のポジションを180度回転させた向きが正しいから、180度回転させて表示してね」ということをExif情報に書き込みます。
そして後から画像を確認する時に、iPhoneはExif情報の指示を読み込み、画像を回転させて(撮影した時のポジションで)表示してくれています。
つまりiPhone上では
「シャッターボタンを右にした向きの画像」＋「Exif情報(〇〇度回転)」＝画像を表示
というカラクリになっています。
なので、
の場合は、「シャッターボタンを右にした向きの画像」＋「Exif情報(回転なし)」なので回転せずに表示されます。
そして、
のポジションで撮影した場合の画像は「シャッターボタンを右にした向きの画像」＋「Exif情報(反時計回りに90度回転)させて表示」の、「Exif情報(反時計回りに90度回転)させて表示」が読み込めない為、
時計回りに90度回転した画像(シャッターボタンを右にした向きの画像)が表示される。という事になります。
【改善方法】
1.「フォト」アプリで「編集する」→なにもせずに「コピーを保存」
※Windows10のみで検証
上記の方法だけでExif情報が書き換えられ、投稿した画像は回転せずに表示されます。
こんな感じです。
2.撮影時、「シャッターボタンが右に来る」ポジションで撮影する。
縦で撮りたい時は。。。あきらめる。。。
【念のためのお知らせとお詫び】
上記はあくまで「iPhone6」かつ「カメラアプリで撮影した画像を投稿した場合」の現象です。
その他の条件の場合、フツーに投稿した画像が回転せずに表示されるかもしれません。
また、今回はメチャクチャ投稿内容が長くなってしまいました。ごめんなさい。
最後まで読んでくださってありがとうございました。
【追記】
投稿後すぐにiPhone＋PARTIKOで確認したところ、変に回転せずフツーに表示されていました。
PCはWindows10＋edgeです。。。
ただ、PARTIKOから「view on website」で表示させると上記のように回転しています。
アプリとブラウザ？では画像の表示処理の仕方が違うのか。。。興味は尽きないですが、今日はこの辺で。