今更だけどCropper.jsでの画像トリミングについて書いてみた。

プログラム
スポンサーリンク
スポンサーリンク

事の発端

自作サービス「ツーマッチ」にてマイページを作成しているときユーザーの写真を表示する機能が欲しいな・・・

こんなことをふと思いつきました。

それじゃその機能を搭載しなきゃなと色々自作で作成していたのですが、どうにもいい案が思いつかない。これはプラグインを導入してサクッと作らないと時間がかかるやつだ・・・

と思い、早速Google先生に教えてもらった。そんなときに見つけたのがこのCropper.jsです。

今回はその導入時に少し詰まったので、詰まった箇所とそのサンプルを掲載しようと思います。

ぐだぐだ書くのは面倒なので、手っ取り早くコードを記載しますね。

 

こちらは正常に動作するサンプルです。(旧リンクです。申し訳ない。)

Cropper Sample

[ad]

スポンサーリンク

課題

  • Cropperの再読み込み(画像間違えちゃったー)のパターンからの復帰方法
    • これは公式ページを見れば改善可能ですね。
  • toBlob関数のブラウザ依存
    • 3通り書きましたがtoBlobとmsToBlob以外にあるのか?しかもすべてに当てはまらない場合どのようにアップすればいいかわかりませんでした。知識のある方ご教示いただきたい。
スポンサーリンク

画像トリミングの重要性

最後になりますが、画像トリミング、かなり重要だと思うんですよね。
WEBサービスだと画像アップしてもトリミングさせてくれないサービスが多いと思います。
セキュリティなども重要ですが、ユーザビリティも重要ですよね。
有名どころであれば(Google,Twitter,GitHub……)色々なアカウントサービスではアイコンをトリミングさせてくれますが、
ぶっちゃけ小さな会社のサービスとか含めてしまいますとどうなのでしょうか。
こういったコンテンツ編集系の処理はあまり得意としませんが、Youtube等の台頭で動画の編集もWEBやるのが当たり前になるかもしれませんね。(Twitterとかそうだし、もうなっているのか?)

ネイティブで組まなきゃーってなっていたところがWEBに喰われている感がある今日のこの頃です。
何か指摘事項ありましたら是非ともお願いいたします。
何分ぺーぺーなもので、指摘されるために書いたまであります。

スポンサーリンク

参考

fengyuanchen/cropperjs
JavaScript image cropper. Contribute to fengyuanchen/cropperjs development by creating an account on GitHub.
プログラム
スポンサーリンク
シェアする
スポンサーリンク
ライダープログラマー入門

コメント