【JavaScript】画像切り抜き用ライブラリ Cropper.js の紹介と Cropper.js の結果をimg要素、input[type=”file”]要素に出力する方法

　Cropper.js は画像をウェブページ上で加工するための JavaScript のライブラリです。人気で古くから続くライブラリで npm のみならず CDN でも配信されています。Cropeer.js のソースコードとデモは次にあります。

fengyuanchen/cropperjs： JavaScript image cropper.
Cropper.js#デモ

　Cropper.js の使い方は様々ですが、なんやかんやして img 要素を用意して Cropper.js 入力し、Cropper.js の出力を canvas 要素形式でもらってなんやかんやいい感じに目的の形式する使い方が多いです。この記事では既存の img 要素を Cropper.js にかけて また img 要素にする方法と input[type=”file”] な要素にファイルとしてセットする方法を紹介します。
　
　まずは Cropper.js の初期化方法です。これは次でできます。

<img id="cropper-tgt" src="/assets/img/PHP-logo.svg.webp">

  document.addEventListener('DOMContentLoaded', function (){
    new Cropper(
      // 第一引数に Cropper.js をかける画像の要素をセット
      document.getElementById('cropper-tgt'),
      {
        // 第二引数には Cropper.js のオプションをセット
        // 何ができるかは次のリンクを参照
        // @see https://github.com/fengyuanchen/cropperjs#options
        aspectRatio: 16 / 9,
      }
    );
  })

　シンプルです。単純にimg要素を Cropeer.js に渡すだけです。これを実行したデモが次です。

　単に切り抜き操作パネルがあるだけでは大して役に立ちません。この切り抜き結果を画像やファイルにすることを考えます。画像については次の様なコードでできます。

<img id="cropper-tgt" src="/assets/img/PHP-logo.svg.webp">
<div class="control">
  <button type="button" id="btn-crop-action">切り取り</button>
  <img id="preview">
</div>

  document.addEventListener('DOMContentLoaded', function (){
    // 先程同様に Cropper を準備
    const cropper = new Cropper(
      document.getElementById('cropper-tgt'),
      {aspectRatio: 16 / 9}
    );
    document.getElementById('btn-crop-action').addEventListener('click', function(){
      // Cropper インスタンスから現在の切り抜き範囲の画像を canvas 要素として取れます。
      /** @var {HTMLCanvasElement} croppedCanvas */
      const croppedCanvas = cropper.getCroppedCanvas();
      // canvas要素にはimg要素のsrcプロパティに渡した時に画像として表示される形式のデータを返すメソッド toDataURL があります。
      // これをimg要素に渡すことで切り抜き結果を画面に表示できます。
      // @see https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/toDataURL
      document.getElementById('preview').src = croppedCanvas.toDataURL()
    })
  })

　Cropper.js は getCroppedCanvas というメソッドで現在の切り抜き範囲になっている画像部を canvas 要素として返してくれます。この canvas 要素を img 要素の src に渡せる様にすることで切り抜き結果を表示できます。これを実行したデモが次です。

　同様に canvas 要素にした後にファイル化する方法もあります。このファイルを input[type=”file”] な要素に渡すことによって、切り抜き結果をフォームの一部として自然に送信できるようになります。

<div class="control">
  <button type="button" id="btn-crop-action">切り取り</button>
  <label>切り抜き画像ファイル<input type="file" name="cropped-img"></label>
</div>

document.addEventListener('DOMContentLoaded', function (){
    // 先程同様に Cropper を準備
    const cropper = new Cropper(
      document.getElementById('cropper-tgt'),
      {aspectRatio: 16 / 9}
    );
    document.getElementById('btn-crop-action').addEventListener('click', function(){
      // Cropper インスタンスから現在の切り抜き範囲の画像を canvas 要素として取れます。
      /** @var {HTMLCanvasElement} croppedCanvas */
      const croppedCanvas = cropper.getCroppedCanvas();
      // canvas 要素には描画されているデータを Blob としてを扱える様にするメソッド toBlob があります。
      // これを img 要素に渡すことで切り抜き結果を画面に表示できます。
      // @see https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/toDataURL
      croppedCanvas.toBlob(function(imgBlob){
        // Blob を元に File 化します。
        const croppedImgFile = new File([imgBlob], '切り抜き画像.png' , {type: "image/png"});
        // DataTransfer インスタンスを介することで input 要素の　files に
        // JavaScript 内で作った File を渡せます。
        // 直に new FileList から作って渡そうとすると失敗します。
        const dt = new DataTransfer();
        dt.items.add(croppedImgFile);
        document.querySelector('input[name="cropped-img"]').files = dt.files;
      });
    })
  })

　この中では元々あった画像要素をどうこうするという方法のみを紹介しましたが、入力をinput要素にすることもできますし、外から切り抜き範囲を操作したり、拡縮移動以外にも回転など操作をしたりと様々な多彩なことができます。