LoginSignup
32

More than 5 years have passed since last update.

Web上で画像をトリミングするにはCroppieがいい感じかもしれない

Last updated at Posted at 2018-12-10

P&Dアドベントカレンダー10日目の記事です。まだ10日目です。UTC的にはまだ10日目です。

ブラウザで画像を切り取るとき

画像をトリミングするといえば、「Cropper.js」といったツールや他にも「Jcrop」などがあります。これらの共通点としては、画像のトリミング範囲をバウンディングボックスを動かす形で指定するところでしょう。

Cropper.js Jcrop
image.png image.png

しかし、Twitterのような画像のトリミング方法を採用したとき、上記のライブラリだと厳しいものがある。
image.png
その時に活躍するライブラリが「Croppie」です。

Croppie

image.png

CroppieはPure JSでもjQueryでも使えるプラグインです。
詳しい使い方は公式ページを見ていただくとして、簡単な使い方を紹介します。

<div class="js-croppie"></div>
$(function() {
  var $preview = $('.js-croppie');

  var $uploadCrop = $preview.croppie({
    url: 'http://placekitten.com/500/800',
    viewport: {
      width: 200,
      height: 200
    },
    boundary: {
      width: 300,
      height: 300
    }
  });
 })

image.png

あらかわいい猫。
これだけでトリミングの画面ができます。viewportが内枠、boundaryが外枠の大きさになります。

結果を出力する

切り取った画像をbase64blobといった形式で書き出すことができます。

<div class="js-croppie"></div>
<button class="js-crop">Crop!</button>

<div class="js-cropped-image"></div>
$(function() {
  var $preview = $('.js-croppie');

  var $croppie = $preview.croppie({
    url: 'http://placekitten.com/500/800',
    viewport: {
      width: 200,
      height: 200
    },
    boundary: {
      width: 300,
      height: 300
    }
  });

  // buttonを押したらクロップ
  $('.js-crop').on('click', function() {
    // 結果を出力
    $croppie.croppie('result', 'base64').then(function(base64) {
      $croppedImage = $('.js-cropped-image');
      $croppedImage.html('');
      $('<img>').attr('src', base64).appendTo($croppedImage);
    });
  })
 })

枠の座標を出力する

サーバで画像をトリミングするとき、画像の元データと座標データをサーバ側に送ることが多いです。

そのときはupdate.croppieイベントで座標を取ることができます。
左上x座標y座標、右下x座標y座標の値が返ってきます。

<div class="js-croppie"></div>

<div class="js-coord">
  <input type="text" name="x1">
  <input type="text" name="y1">
  <input type="text" name="x2">
  <input type="text" name="y2">
</div>
$(function() {
  var $preview = $('.js-croppie');

  var $croppie = $preview.croppie({
    url: 'http://placekitten.com/500/800',
    viewport: {
      width: 200,
      height: 200
    },
    boundary: {
      width: 300,
      height: 300
    }
  });

  $croppie.on('update.croppie', function(e, cropData) {
    $('input[name="x1"]').val(cropData.points[0]);
    $('input[name="y1"]').val(cropData.points[1]);
    $('input[name="x2"]').val(cropData.points[2]);
    $('input[name="y2"]').val(cropData.points[3]);
  })

デモ

Codepenにデモを書いているので参考にしてください。
https://codepen.io/1060ki/pen/aQxqwJ

追伸

http://placekitten.com/ は猫好きはぜひ使うべきだと思うんです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32