【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',
);
参考記事
がく対応
- 自作では時間がかかるのでライブラリを導入して対応する
ライブラリ調査
- cropper.js
- vue-cropper
- vue-advanced-cropper
- vue-cropperjs
- croppie.js
- vue-croppie
- 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で挙げれられているバグに対して積極的に解消している
がくvue-advanced-cropper導入後詰まりポイント
- ライブラリのstyleをインポートするの忘れて無駄に時間使った
- ライブラリでできることが多い分、ドキュメントやGitHub issueからpropsやeventを指定方法を探すのが大変だった
(stencilの種類、image-restrictionの指定、stencilのdefault-size指定とかできるのは便利だった)