Cropper.js【JSライブラリ1日1個】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べます！

① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する

本日は、Cropper.jsのドキュメントを読んで実際に業務で使っているところを調べました。

ドキュメント

本日はこちらのREADMEを読みました！！

github.com

実際に使ってみる

今回は、codepenを参考にさせていただきました！
https://codepen.io/amalajith/pen/VWjydm

<!DOCTYPE html>
<html lang="ja">
  <style>
img {
  display: block;

  /* This rule is very important, please don't ignore this */
  max-width: 100%;
}
  </style>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js"></script>
  </head>
  <body>
    <div>
      <img id="image" src="neko.jpg">
    </div>
  </body>
  <script>
    var image = document.getElementById('image');
    var cropper = new Cropper(image, {
      aspectRatio: 16 / 9,
      crop: function(e) {
        console.log(e.detail.x);
        console.log(e.detail.y);
        console.log(e.detail.width);
        console.log(e.detail.height);
        console.log(e.detail.rotate);
        console.log(e.detail.scaleX);
        console.log(e.detail.scaleY);
      }
    });

    function crop() {
      cropper.getCroppedCanvas().toBlob(function (blob) {
        var formData = new FormData();

        formData.append('croppedImage', blob);

        // Use `jQuery.ajax` method
        $.ajax('/path/to/upload', {
          method: "POST",
          data: formData,
          processData: false,
          contentType: false,
          success: function () {
            console.log('Upload success');
          },
          error: function () {
            console.log('Upload error');
          }
        });
      });
    }
  </script>
</html>

こんな感じで、画像のトリミング範囲が選択できるようになりました。
f:id:kattyan53:20191217205613p:plain

一言でいうと

Cropper.jsを導入すると、

画像のトリミング、回転、ズームなどができるようになる

フィードバック

---

以上です！

宮水の日記

主に書評や資格取得について記事を書いています。