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

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

# ブラウザで画像を切り取るとき
画像をトリミングするといえば、「[Cropper.js](https://fengyuanchen.github.io/cropperjs/)」といったツールや他にも「[Jcrop](https://jcrop.com/)」などがあります。これらの共通点としては、画像のトリミング範囲をバウンディングボックスを動かす形で指定するところでしょう。

|Cropper.js|Jcrop|
|----------|-----|
|![image.png](https://qiita-image-store.s3.amazonaws.com/0/123970/021dc57c-2a4a-94b3-2a33-dcd6d2a54f31.png)|![image.png](https://qiita-image-store.s3.amazonaws.com/0/123970/ea98f1b6-fb5e-93c4-3f3b-d94a4dea5346.png)
|

しかし、Twitterのような画像のトリミング方法を採用したとき、上記のライブラリだと厳しいものがある。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/123970/177ad5cb-3bc6-9e22-73cc-04f4565008d6.png)
その時に活躍するライブラリが「[Croppie](https://foliotek.github.io/Croppie/)」です。

# Croppie
![image.png](https://qiita-image-store.s3.amazonaws.com/0/123970/86efccb3-b2bb-3073-a437-1809b41c810a.png)

https://foliotek.github.io/Croppie/

Croppieは`Pure JS`でも`jQuery`でも使えるプラグインです。
詳しい使い方は[公式ページ](https://foliotek.github.io/Croppie/)を見ていただくとして、簡単な使い方を紹介します。

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

``` js
$(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](https://qiita-image-store.s3.amazonaws.com/0/123970/d79129ed-1d17-5449-c988-e3803a9311d9.png)


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

# 結果を出力する
切り取った画像を`base64`や`blob`といった形式で書き出すことができます。

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

<div class="js-cropped-image"></div>
```

``` js
$(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座標の値が返ってきます。

``` html
<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>
```

``` js
$(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/ は猫好きはぜひ使うべきだと思うんです。