MENU

clear
Zihuatanejo to me

ブログカテゴリー

最新の記事

メニュー

SNS

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

目次

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

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

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

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

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

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

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

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

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

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

    トリミング

    要件定義

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

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

    デモ

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

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

    GitHub

    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!

    最後に

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

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

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

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

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

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

    本日はここまで!

    お疲れ様でした!!

    コメントを残す

    メールアドレスが公開されることはありません。

    arrow_upward

    Top