【cordova】画像が横向きになる問題を解消する

コルドバでアプリを作っていると、FileReaderを使って画像をアップロードする機能が欲しくなるときがあります。

このライブラリを使う時に少しめんどくさいのが、アップロードの際に画像が90度回転してしまいその修正をしなければいけないという点です。

こんな感じです。↓

対策としてexif-jsを使って向きを調べた後にcanvasで修正する方法があるのですが、コールバックが含まれていて可読性が下がってしまう

点とandroidのバージョンが古いとちゃんと動作しないという問題を抱えています。

reactで開発していることもあって、スタックオーバーフローを見ても事例が少なく途方に暮れていたところ有用なサイトを発見。

どうやらnpmでblueimp-load-imageという画像を独自メソッドを使って直してくれる便利そうなパッケージを発見。

さっそくnpm install blueimp-load-imageでインストール。下でコードの説明をしていきます。

<pre> loadImage.parseMetaData(file, (data) =&gt; {
            const options = {
                maxHeight: 1024,
                maxWidth: 1024,
                canvas: true
            };
            if (data.exif) {
                options.orientation = data.exif.get('Orientation');
            }
            loadImage(file, (canvas) =&gt; {
                const dataUri = canvas.toDataURL('image/jpeg');
                const imgNode = this.refs.image;
                imgNode.src = dataUri;
            },
            options);
        });</pre>

parseMetaDataメソッドを使って画像を修正するのですが、まず最初に対象のfileを引数にした後にオプションでキャンバスをtrueで使用

可能にし、その次にdata.exifで画像の向きを調べています。loadImageではtoDataURLでbase64に変換して、最終的にimgNodeとタグ

this.refs.imageを紐付けて画像を表示しています。このコードで全てセットなので、難しかった画像の向きも簡単に修正することができますね。

これで横向きになっていたがぞうが元に戻りました。めでたしめでたし。

その他参考にさせていただいたサイトです。－＞http://dackdive.hateblo.jp/entry/2016/07/19/095000