画像トリミングで cropper.js を使用した概要と感想
ドキュメント
GitHub - fengyuanchen/cropperjs: JavaScript image cropper.
参考サイト
Cropper.jsを使ってみる | cly7796.net
上記サイトは、オプションを使う使わないのそれぞれ違いがサンプルで見れるので良いです。
コード(概要)
const cropper = new Cropper(image, { //image:トリミングする画像
//オプション
});
//選択した範囲のHTMLCanvasElement返します。(getCroppedCanvasはcropper.jsのメソッド).
const 変数1 = cropper.getCroppedCanvas();
const 変数2 = 変数1.toDataURL();//data URI を返す.
変数2.toBlob(function(blob){
const 変数3 = new FormData(); // FormData作成
変数3.append('blob', blob); //blob追加
//ajaxで送信
});
参考:
HTMLCanvasElement.toDataURL() - Web API | MDN
HTMLCanvasElement.toBlob() - Web API | MDN
感想:
トリミングされた画像を受け取ってアップロードしたり、DBに格納するサーバ側の処理も書いているが、JSで色々調べて触ることが多かった。
・トリミング後のプレビュー表示
・バリデーションとしての拡張子チェックやバイナリデータチェック
・toBlob、toDataURL、FormDataやcropper.jsのメソッドなど、知ることが増えつつ、調べながら試していけて楽しかった。
PCでトリミングする時にcropper.jsを使うのはいいが、スマホ(PCでも)では「croppie」が良さそうだと感じた。
大きく違うところは、画像選択してトリミングする範囲を決めるときに範囲移動の動かし方。
例えば、cropper.jsでは右に動かしたとすると、トリミングする範囲が右に動く。
対して、croppieは、右に動かしたとすると、画像自体が右に動き、トリミングする範囲は固定されている。
twitterやLineのプロフィール変更ではcroppieの動きのようになっているのでスマホであればこちらが使いやすいかもと思った。
しかし、今回の自分の仕様要件を満たすためには、cropper.jsが最適だと思ったのでこちらを選んだ。
