【vue-advanced-cropper】iphoneで撮影した画像をアップロードすると回転してしまう問題→解決までメモ

解決したい課題

• iphoneで撮った画像をアップロードすると、画像が回転した状態で登録されてしまう
• 回転だけでなくトリミングもされている

課題に対する対応方針

• アップロードした画像の(回転・トリミングができる)編集機能を作成する
• 自作では時間がかかるのでライブラリを導入して対応する

なぜ、画像が回転してしまうのか

ライブラリ導入検討の前に、なぜ画像が回転して登録されてしまうのか？

原因は画像ファイル形式にある模様。

Exifについて

iphone(だけでなくデジカメ等も含む)で撮った画像データには、撮影した日時・撮影機種・絞り値・画素数・ISO感度・色空間といった情報を記録することができる。
これらのメタデータを併せ持ったファイル形式のことをExifという。

ExifにはOrientationという写真の撮影方向の情報が含まれており、Orientation情報を持った画像をアップロードすると画像が回転してしまう。

Orientationは以下の数値で画像の向きが指定される模様。

%orientation = (
    1 => 'Horizontal (normal)',
    2 => 'Mirror horizontal',
    3 => 'Rotate 180',
    4 => 'Mirror vertical',
    5 => 'Mirror horizontal and rotate 270 CW',
    6 => 'Rotate 90 CW',
    7 => 'Mirror horizontal and rotate 90 CW',
    8 => 'Rotate 270 CW',
);

参考記事

https://www.weblio.jp/content/Exif
http://dqn.sakusakutto.jp/2009/02/jpegexiforientaion.html
https://zenn.dev/helicoir/articles/47120ebc9f3db4
https://qiita.com/a-muku/items/f8f729a29f0b980f7e32

対応

• 自作では時間がかかるのでライブラリを導入して対応する

ライブラリ調査

1. cropper.js
   • 参考URL
     • https://cly7796.net/blog/javascript/try-using-cropper-js/
     • https://zenn.dev/tomken/articles/e7b47394655e1e
     • https://qiita.com/otoan/items/c542092a1b283bfaadaf
     • https://github.com/fengyuanchen/cropperjs
2. vue-cropper
   • 参考URL
     • https://zenn.dev/nana/articles/c6e27ded863a95
     • https://github.com/xyxiao001/vue-cropper
3. vue-advanced-cropper
   • 参考URL
     • https://github.com/Norserium/vue-advanced-cropper/
4. vue-cropperjs
   • 参考URL
     • https://www.memory-lovers.blog/entry/2021/04/22/110000
     • https://github.com/Agontuk/vue-cropperjs
5. croppie.js
   • 参考URL
     • https://qiita.com/1060ki/items/1692f0e275634245c48d
     • https://zenn.dev/to4yasuk2b/articles/2402cde872ae14
   • https://github.com/foliotek/croppie
6. vue-croppie
   • 参考URL
     • https://qiita.com/qiiteinai/items/dfeb79632231f3c8fbd4
     • https://github.com/jofftiquez/vue-croppie
7. vue-croppa
   • 参考URL
     • https://qiita.com/yassyskywalker/items/66a536ed3eaff8670538
     • https://zhanziyang.github.io/vue-croppa/#/
     • https://github.com/zhanziyang/vue-croppa

調べた結果

• vue-croppaやcroppieは更新が2~3年前で止まっていた。

• vue-croppieは2021/10まで更新あるが、↑の記事でドキュメントの誤りや型定義が雑とのことで怖い.

• vue-cropper、vue-cropperjsはvueに依存してしまうがvue2とvue3に対応できる。cropper.jsのラッパー。

• vue-advanced-cropperはドキュメントが英語でreact版のライブラリがある。vue-cropperと似てる。微妙に使い勝手とか違うらしい。vue2とvue3に対応している。検索してもライブラリに関する情報がない。cropper.jsのラッパー。

• vue-cropperjsはドキュメントが中国語だけど、一応英語のREADMEもある。

• npm trendsでの比較
  cropperjs-vs-croppie-vs-vue-croppa-vs-vue-cropper-vs-vue-cropperjs-vs-vue-croppie

vue-advanced-cropperについての調査

• 主な3種類のクロッパーのサポートをしている
  Classic => 切り抜き領域(ステンシル)のサイズ変更と切り抜き箇所の移動ができる。
  Static => 切り抜き領域(ステンシル)のサイズ変更と切り抜き箇所の移動ができない。画像のサイズ変更と位置のみを変更できる。
  Hybrid => サイズ変更と位置の変更ができるが、常にデフォルトの位置とサイズに戻ろうとする(auto zoom)
  https://norserium.github.io/vue-advanced-cropper/introduction/types.html#classic-cropper

• モバイルデバイスの対応
  モバイルデバイスのサポートもしているため、タッチイベントのサポートもしている
  https://norserium.github.io/vue-advanced-cropper/events/drag-event.html#anchor
  アスペクト比の調整

• 固定アスペクト比の指定やアスペクト比の範囲(最小~最大値までの)を指定できる
  https://norserium.github.io/vue-advanced-cropper/guides/recipes.html#passing-props-to-the-stencil
  キャンバス

• トリミングした画像領域からキャンバスを作成できる
  https://norserium.github.io/vue-advanced-cropper/guides/recipes.html#getting-the-result

以下の観点からvue-advanced-cropperを選定。

• 機能的にvue-cropperよりもできることの幅は広いのかなという印象
• GitHubのstarがそこそこある(500以上)
• ドキュメントに記載されている使用例が豊富
• GitHub issueで挙げれられているバグに対して積極的に解消している

https://github.com/advanced-cropper/vue-advanced-cropper

vue-advanced-cropper導入後詰まりポイント

• ライブラリのstyleをインポートするの忘れて無駄に時間使った
• ライブラリでできることが多い分、ドキュメントやGitHub issueからpropsやeventを指定方法を探すのが大変だった
  (stencilの種類、image-restrictionの指定、stencilのdefault-size指定とかできるのは便利だった)