画像アップロードフォームで、スマホから画像選択してプレビュー表示すると、画像が横になってしまう問題

画像をアップロードするフォームを作成した際に、その画像をプレビューしたいという要望がありました。
javascriptでローカルの画像をプレビュー用の要素に表示するようにしたのですが、スマホを縦にして撮った選択すると画像が９０度回転した状態で表示されてしまいます。

$(function () {
    $('#image').change(function () {
        if (!this.files.length) {
            return;
        }
        var file = $(this).prop('files')[0];
        var fr = new FileReader();
        fr.onload = function() {
            $('#preview').css('background-image', 'url(' + fr.result + ')').css('background-size', 'cover');
        }
        fr.readAsDataURL(file);
    });
});

画像データ自体は９０度回転したモノだけど、画像に付加された情報に「９０度回転してます（-90度回転させて表示してね）」というのがあり、それを見てスマホのアルバムなどでは-90度回転させて正常に表示されます。
しかしWEBサイト上ではこれが効かず、横になってる状態で表示されてしまうのが原因でした。
画像の付加情報を見てそれによって画像を回転させて表示するという処理を入れて解決しました。

参考ページ：https://qiita.com/simiraaaa/items/ee243b69bb0e52af069a

以下のライブラリを読み込みます。
https://qiita.com/simiraaaa/items/ee243b69bb0e52af069a

<script src="https://cdn.rawgit.com/blueimp/JavaScript-Load-Image/v2.6.2/js/load-image.all.min.js"></script>
<script src="image_form.js"></script>

image_form.jsの中身（jqueryも使います）

 

 

カテゴリ：javascript 投稿日時：2019年8月22日 09:51

---

コメント

コメントはまだありません。

コメント投稿

ご自由にコメントください！
※一度投稿すると削除できませんのでご注意ください。管理者の独断と偏見で削除する場合があります。コメント機能は予告なく停止する場合があります。

ニックネーム

コメント