画像トリミング機能実装その3

画像のトリミング機能実装

こんにちは！ウェブエンジニアのジワタネホです！

今日は久しぶりにフロントエンドっぽい記事を書こうと思います。

今日は画像トリミングに関して！

ユーザー登録などのフォームをリッチな仕様にするには持ってこいのはず！

長くなるので記事を3つに分けます。

本記事はその3記事目となります!

誰かの開発の参考になれば！！

画像トリミング機能実装その1

画像トリミング機能実装その2

要件定義

こちらの過去記事をご参考ください。

画像トリミング機能実装その1

デモ

http://zihuatanejo.jp/demoes/trimming.html

ちなみにコードは以下に置いてあります。トリミング以外もありますが悪しからず。

GitHub

実装の手順

• 必要なライブラリの実装 -過去記事でdone
• 静的部分のコーディング -過去記事でdone
• Bootstrapでモーダル実装 -過去記事でdone
• File API実装 -過去記事でdone
• Cropper.jsでトリミング実装 - 本記事

Cropper.jsでトリミング実装

完成版コード

$(".js-trimmingModal").on("shown.bs.modal", function(){
  var image = $(".js-trimmingAreaImg")[0];
  var options = {aspectRatio: 1 / 1};
  var cropper = new Cropper(image, options);
  //ボタンをクリックしたらトリミング終了
  $(".js-trimmingBtn").one("click", function(e) {
    //トリミングしたデータ
    var result = cropper.getCroppedCanvas({width: 500, height: 500})
    //トリミングデータを表示
    $(".js-trimmedImg").attr("src", result.toDataURL())
    // 一旦トリミングしたらトリミングのデータはリセット
    cropper.destroy()
    // モーダル非表示
    $(".js-trimmingModal").modal("hide")
  });
});

大まかなコードの解説

• イベント登録
• 必要な要素を変数に代入
• トリミング決定ボタンのイベント登録
• トリミングデータを生成
• トリミングした画像を表示
• トリミング完了の処理

こんな感じの流れです。

イベント登録

$(".js-trimmingModal").on("shown.bs.modal", function(){

モーダルが表示されたらトリミング開始です

Bootstrapのモーダルイベントは、shown.bs.modalで取れます。

Bootstrapのモーダルイベントは他にもあるので参考までに。便利便利。

Bootstrap4 Docs Modal event

必要な要素を変数に代入

var image = $(".js-trimmingAreaImg")[0];
var options = {aspectRatio: 1 / 1};
var cropper = new Cropper(image, options);

トリミングする元画像をimageへ。

トリミングのオプションを設定して変数へ。

たくさんオプション設定できます。詳細は以下。

https://github.com/fengyuanchen/cropperjs#options

今回は分かりやすくトリミングする画像のアスペクト比を1:1、つまり正方形のみの画像に決め打ちします。

最後にCropperオブジェクトを生成します。

トリミング決定ボタンのイベント登録

$(".js-trimmingBtn").one("click", function(e) {

.one("click",..って便利ですよねー。

.on("click",..との違いは一回だけという意味です。

これが味噌です。

すでにモーダルイベントの中に書いているので、.on("click",..を設定してしまうとモーダルが表示する旅に.on("click",..が登録されてしまいます。

トリミングデータを生成

var result = cropper.getCroppedCanvas({width: 500, height: 500})

上記の.getCroppedCanvas({width: 500, height: 500})でトリミングデータを生成します。

わかると思いますが、width,heightはトリミング画像の大きさです。単位はpxになっています。

ちなみにこのデータを俗にcanvasデータと呼びます。

トリミングした画像を表示

$(".js-trimmedImg").attr("src", result.toDataURL())

上記の.toDataURL()で画像のURLを生成します。詳細は以下。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

そのURLを表示させたいimageタグのsrcにセットします。

トリミング完了の処理

cropper.destroy()

$(".js-trimmingModal").modal("hide")

家に着くまでが遠足ですからね。

閉じる処理まで。

まずcropperオブジェクトを.destroy()でリセットします。

これがないと次にモーダルを開いた時に前のトリミングデータが残ってしまいます。

あとはモーダルを閉じる処理。

Boodstrapのモーダルのお決まりです。.modal("hide")。

以上でDoooone!

最後に

かれこれこのテーマで３記事も書いてしまった。

いかがだったでしょうか?

通常のユースケースだとおそらくここからこのデータをPOSTするかと思います。

その際もcanvasデータをajax送信できる型に変換して送信する流れになるかと思います。

送信処理に関しては、タイミングがあれば書こうかと思います。

わからないこと等あればコメントください！！

本日はここまで！

お疲れ様でした！！