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

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

$(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度回転してます(-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も使います)

function load(file, callback) {
    var options = {canvas: true, crop:true, maxWidth:126, maxHeight:126};
 
    loadImage.parseMetaData(file, function (data) {
        if (data.exif) {
            options.orientation = data.exif.get('Orientation');
            console.log('Orientation: ' + options.orientation);
        }
        loadImage(file, callback, options);
    });
}
 
$(function () {
    var preview = document.getElementById('#preview');
    $('#image').change(function(){
        var file = $(this).prop('files')[0];
        if(!file) return;
        if(!/image/.test(file.type)) {
            alert('画像を選択してください。');
            return;
        }
        load(file, function(canvas) {
            $('canvas').hide();
            preview.appendChild(canvas);
        });
    });
});

 

 

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


コメント

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

コメント投稿

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

ニックネーム

コメント

カテゴリ

新着備忘録

CakePHP3にUpload Pluginをインストール

CakePHP3にUpload Pluginをインストールする方法です。

要素の背景にbackground-size:coverみたいに動画を配置する

要素の背景にbackground-size:coverみたいに動画を配置する方法です。

要素の背景にbackground-size:coverみたいに動画を配置する

要素の背景にbackground-size:coverみたいに動画を配置する方法です。

要素の背景にbackground-size:coverみたいに動画を配置する

要素の背景にbackground-size:coverみたいに動画を配置する方法です。

iphoneで入力フォームを選択すると画面が拡大されてしまう問題

iphoneで入力フォームを選択すると画面が拡大されてしまう問題を解決する方法