React画像トリミングライブラリ：react-avatar-editor vs react-cropper vs react-easy-crop vs react-image-crop

Reactアプリケーションで画像をトリミングする必要があるとき、どのライブラリを選ぶべきでしょうか？ react-avatar-editor、react-cropper、react-easy-crop、react-image-crop はすべて同じ目的を持ちますが、内部実装、機能セット、開発体験に大きな違いがあります。この記事では、実際のコード例を交えながら、それぞれの特徴と使いどころを詳しく比較します。

🖼️ 基本的な使用方法とAPI設計

react-avatar-editor

react-avatar-editor は、canvas要素を直接操作して画像を描画・トリミングします。コンポーネントのpropsを通じて画像ソース、スケール、回転などを指定します。

import AvatarEditor from 'react-avatar-editor';

function Editor() {
  const editorRef = useRef(null);

  const handleSave = () => {
    const canvas = editorRef.current.getImage();
    const dataUrl = canvas.toDataURL('image/png');
    // dataUrlをサーバーに送信など
  };

  return (
    <div>
      <AvatarEditor
        ref={editorRef}
        image="/path/to/image.jpg"
        width={250}
        height={250}
        border={50}
        color={[255, 255, 255, 0.6]} // RGBA
        scale={1.2}
        rotate={0}
      />
      <button onClick={handleSave}>保存</button>
    </div>
  );
}

react-cropper

react-cropper は、人気のあるCropper.jsライブラリをReactコンポーネントとしてラップしています。ref経由でCropperインスタンスにアクセスし、メソッドを呼び出します。

import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';

function Editor() {
  const cropperRef = useRef(null);

  const handleCrop = () => {
    const imageElement = cropperRef?.current;
    const cropper = imageElement?.cropper;
    const croppedCanvas = cropper.getCroppedCanvas();
    const dataUrl = croppedCanvas.toDataURL('image/jpeg');
  };

  return (
    <div>
      <Cropper
        src="/path/to/image.jpg"
        style={{ height: 400, width: '100%' }}
        initialAspectRatio={1}
        guides={true}
        cropBoxResizable={true}
        ref={cropperRef}
      />
      <button onClick={handleCrop}>トリミング</button>
    </div>
  );
}

react-easy-crop

react-easy-crop は、純粋なReactコンポーネントで、canvasではなくCSS transformを使用して画像を操作します。トリミング結果の座標をコールバックで受け取り、別途canvasで最終画像を生成します。

import Cropper from 'react-easy-crop';

function Editor() {
  const [crop, setCrop] = useState({ x: 0, y: 0 });
  const [zoom, setZoom] = useState(1);
  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);

  const onCropComplete = (croppedArea, croppedAreaPixels) => {
    setCroppedAreaPixels(croppedAreaPixels);
  };

  const showCroppedImage = async () => {
    const croppedImage = await getCroppedImg(
      '/path/to/image.jpg',
      croppedAreaPixels
    );
    // croppedImageはdata URL
  };

  return (
    <div>
      <div style={{ position: 'relative', width: '100%', height: 400 }}>
        <Cropper
          image="/path/to/image.jpg"
          crop={crop}
          zoom={zoom}
          aspect={1}
          onCropChange={setCrop}
          onZoomChange={setZoom}
          onCropComplete={onCropComplete}
        />
      </div>
      <button onClick={showCroppedImage}>表示</button>
    </div>
  );
}

react-image-crop

react-image-crop は、最小限の機能に特化したシンプルなライブラリです。propsで画像とクロップ領域を指定し、onChangeで更新を監視します。

import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';

function Editor() {
  const [crop, setCrop] = useState({ aspect: 1 });

  const onImageLoaded = (image) => {
    // 画像が読み込まれた後の処理
  };

  const onCropComplete = (crop) => {
    // クロップ領域が確定したときの処理
  };

  return (
    <ReactCrop
      src="/path/to/image.jpg"
      crop={crop}
      onImageLoaded={onImageLoaded}
      onComplete={onCropComplete}
      onChange={newCrop => setCrop(newCrop)}
    />
  );
}

🧩 機能比較：何ができるか、何ができないか

アスペクト比の制御

• react-avatar-editor: 正方形固定（widthとheightを同じ値に設定することで疑似対応可能だが、本質的には正方形専用）。
• react-cropper: 自由に設定可能。aspectRatio propで数値またはNaN（自由）を指定。
• react-easy-crop: aspect propで任意の比率を指定可能（例: 16 / 9）。
• react-image-crop: crop.aspectで比率を指定可能。

拡大・縮小（Zoom）と回転

• react-avatar-editor: scale propで拡大縮小、rotate propで回転（90度単位）。
• react-cropper: 拡大縮小、任意角度の回転、フリップ（水平・垂直反転）をサポート。
• react-easy-crop: 滑らかなzoomと任意角度のrotationをサポート。
• react-image-crop: 拡大縮小や回転はサポートされていない。

出力形式と画像生成

• react-avatar-editor: 内部でcanvasを操作するため、getImage()で直接canvas要素を取得可能。高品質なPNG出力が可能。
• react-cropper: getCroppedCanvas()でcanvasを取得し、そこからdata URLやBlobを生成。
• react-easy-crop: トリミング座標のみを提供。最終画像の生成には、提供されているユーティリティ関数（getCroppedImg）または自前実装が必要。
• react-image-crop: getCroppedImgなどのヘルパー関数は提供されず、開発者が自前でcanvas操作を実装する必要がある。

⚙️ パフォーマンスとbundle sizeへの影響

• react-avatar-editor: canvasベースのため、大規模な画像でも比較的軽量だが、アニメーションやインタラクションは限定的。
• react-cropper: Cropper.jsに依存するため、bundle sizeが大きくなりがち。ただし、機能が豊富でパフォーマンスも十分。
• react-easy-crop: 純粋なReact実装で依存が少なく、bundle sizeも小さい。CSS transformによる描画で滑らかな操作が可能。
• react-image-crop: 最も軽量で、最小限の機能に特化しているため、パフォーマンスへの影響は極小。

🛠️ 実装の手間とカスタマイズ性

• react-avatar-editor: カスタマイズ性は低く、スタイルや挙動の変更が難しい。正方形のアバター用途以外には不向き。
• react-cropper: Cropper.jsの豊富なオプションを活用できるため、高度なカスタマイズが可能。ただし、Cropper.jsの学習コストが発生。
• react-easy-crop: 直感的なAPIと豊富なコールバックで、カスタムUIの実装が容易。zoomやrotationのスライダーを簡単に追加可能。
• react-image-crop: 基本的な機能しか提供しないため、高度なカスタマイズには多くの自前実装が必要。

📌 まとめ：どのライブラリを選ぶべきか

💡 最終的なアドバイス

• シンプルなアバター編集 → react-avatar-editor（ただし、メンテナンス状況を確認）
• フル機能の画像エディタ → react-cropper
• バランスの取れたモダンな実装 → react-easy-crop
• 軽量で最小限の機能 → react-image-crop

プロジェクトの要件に合わせて、これらのライブラリの中から最適なものを選んでください。