【React】「React Image Crop」ライブラリを使って画像を切り抜く

だいぶ久しぶりの投稿になりましたが、今回は「React Image Crop」ライブラリについてです。
現在開発中のプロジェクトで、画像の切り抜き機能を実装する必要があったので、その導入方法について簡単にまとめました。

GitHub のページはこちらから。

GitHub – DominicTobias/react-image-crop: A responsive image cropping tool for React
https://github.com/DominicTobias/react-image-crop

ライブラリのインストールは下記のコマンドを実行して下さい。

npm install react-image-crop --save

サンプルコードは下記のとおりです。

import React, {useState} from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';

export default ImageCrip(props) {
  const [crop, setCrop] = useState({});
  const onCrop = async() => {
    setTrimOpen(false);
    const imageRef = document.getElementById('rawImage');
    if (imageRef && crop.width && crop.height) {
      const croppedImageUrl = await getCroppedImg(imageRef, crop);
      console.log("切り抜かれた画像のbase64データ: ", croppedImageUrl);
    }
  }
  const getCroppedImg = (image, crop) => {
    const canvas = document.createElement('canvas');
    const pixelRatio = window.devicePixelRatio;
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    const ctx = canvas.getContext('2d');

    canvas.width = crop.width * pixelRatio * scaleX;
    canvas.height = crop.height * pixelRatio * scaleY;

    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
    ctx.imageSmoothingQuality = 'high';
    ctx.drawImage(image, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width * scaleX, crop.height * scaleY);

    return canvas.toDataURL('image/jpeg', 1.0);
  }

  return (
    <ReactCrop crop={crop} onChange={c => setCrop(c)}>
      <img src={切り抜きたい元画像のパス} id="rawImage" />
    </ReactCrop>
    <Button onClick={onCrop}>選択範囲で切り抜く</Button>
  );
}

GitHub のサンプルでは、実際にトリミングしたデータをどのように取り出すかが分かりにくかったので、そのあたりが主です。
getCroppedImg() に、元画像データと切り抜きの座標やサイズ等を渡して、切り抜き後の画像データを生成しています。
なお、最低限の箇所しか掲載していないため、画像選択の処理や、切り抜き後の画像をアップロードする処理等は、適宜追加してください。

以上、React の「React Image Crop」ライブラリを使って画像を切り抜く方法についてでした。
ご参考になれば幸いです。