Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

javascriptで簡単にAmazon風な画像トリミングができるライブラリ!

More than 3 years have passed since last update.

前置き

esa.ioで社内向けに書いたものをこちらに移転。
javascriptでお手軽に顔認識できちゃうライブラリ で、javascriptで画像の顔認識のできるライブラリを紹介し実践しましたが、顔認識した画像を切り出せたら機械学習とかに使えそうじゃね?って思い、画像トリミングできないか調べていたところ、簡単にできるライブラリを見つけたので使ってみた。

Cropper

CropperというJqueryの画像切り抜きプラグイン + Canvasを使用する。

Canvas(キャンバス)とは?

Javascriptでグラフや図形などが描画できる。(今回は切り出した画像を描画するのに使用)
もっと知りたい方はHTML5公式サイトを読んでくださいまし〜。

導入

ざっくり以下の4ステップ。
Cropperから必要なものをダウンロード
②ダウンロードしたものを任意のディレクトリに配置し、jqueryと共に読み込み。
③画像を準備。決められたメソッド、オプションを呼ぶだけ
④canvasに切り出した画像を生成する

Cropper公式サイトで、Amazon風なトリミングの挙動を確認できますが、機能が多すぎるので、使いやすいようにまずは必要最低限にします。

作ってみた結果

1n4bkf.gif

公式サイトにあるようにリアルタイムの切り抜きではないのが惜しいですが、、、
リファレンスのどこかに対応方法が記載されているはずです。

ソースコード

GitHub に置いてくのでご自由にどぞ

以下、コピペでok。画像の部分のみ自分で用意して変更してください。
html,jsは同階層に配置してます。

index.html
<!DOCTYPE html>
<html>
 <head>
   <title>Cropper</title>
   <link rel="stylesheet" type="text/css" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.css"/>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.js"></script>
   <script type="text/javascript" src="cropperImg.js"></script>

  //少ないのでcssベタ書き。ここら辺は好みでカスタマイズしてください
  <style>
   .img-container {
    width: 400px;
    height: 300px;
    display: inline-block;
   }
   .img-canvas {
    display: inline-block;
   }
  </style>
 </head>

 <body>

  <div class="img-container">
    <img src="img/fluits.jpg" id="img−default" class="img-responsive"  alt="fluits">
  </div>

  <!-- トリミングされた画像が表示される場所。縦横は好みで設定 -->
  <canvas id="jsi-canvas" class="img-canvas" width="200" height="200"></canvas>

 </body>
</html>
cropperImg.js
var FLUITS = FLUITS || {};

FLUITS.PICKUP = {
  VECTOR_X: 1,
  VECTOR_Y: 1,
  IMG_PATH: 'img/fluits.jpg',
  IMG_SETTING: {
   background: false, //背面の柄消去
   modal:false, //背面のフィルター消去
   aspectRatio: this.VECTOR_X / this.VECTOR_Y // ここでアスペクト比の調整 ワイド画面にしたい場合は 16 / 9
  },

  init:function(){
   this.setParameters();
   this.bindEvent();
  },

  setParameters:function(){
   this.$imgDef = $('#img−default');
   this.$cutBtn = $('.jsc-cut-btn');
   this.$imgDef.cropper(this.IMG_SETTING);
   this.$cropperBorder = $('.cropper-crop-box');
   this.img = new Image();
   this.canvas = document.getElementById('jsi-canvas').getContext('2d');//お決まりの書き方なのでそのまま使用
  },

  bindEvent:function(){
   var self = this;

   this.$cropperBorder.on('mousemove', function() { //動きを監視
    self.setImgParams();
   });
  },

  setImgParams:function(){
   var data = this.$imgDef.cropper('getData'); //getDataは用意されたオプション
   var imageData = {
    x: Math.round(data.x),
    y: Math.round(data.y),
    width: Math.round(data.width),
    height: Math.round(data.height),
    vectorX: this.VECTOR_X,
    vectorY: this.VECTOR_Y
   };
   this.drawImg(imageData);
  },

  drawImg:function(data){
   this.img.src = this.IMG_PATH;
   this.canvas.drawImage(
    this.img,
    data['x'],
    data['y'],
    data['width'],
    data['height'],
    0,0,//切り出されるCanvas内での座標指定
    data['vectorX']*120, //切り出される画像の横幅
    data['vectorY']*120 //切り出される画像の縦幅
   );
  }
}

$(function(){
 FLUITS.PICKUP.init();
});

後書き

リファレンスもしっかりしているので、ちゃんと読み込めば使えそう!
画像のズーム機能も付いており、ECサイトとかそういうのにはもってこいじゃないすかね〜

参考

画像を切り抜くjqueryプラグイン「Cropper」を使ってみる
手軽にアバターサイズにトリミング加工することが出来るjQueryプラグイン
jQuery:画像切り抜きプラグイン「Cropper.js」のガイドにフェイスラインを追加して、証明写真系の切り抜きインターフェースを優しくしよう!

Canvasでごにょごにょする方法

画像を描画する命令drawImage()
【JSで顔認識】画像から判定する方法

fablic
満足度No.1 のフリマアプリ「ラクマ」を運営しています。
https://fril.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away