Zenn
Rabee Tech blogPublicationへの投稿
🐝

Cropper.jsを使ってトリミング機能実装

suico
2023/03/30に公開
JavaScript
library
Rabee
tech

はじめに

今回は Cropper.js というライブラリを使って、画像のトリミング機能を実装する方法を解説できればと思います。

Cropper.jsについて

Cropper.js は画像をwebページ上で加工できる JavaScript のライブラリです。
npm でも CDN でもどちらでもok。
使い方も難しくなく、読み込むだけで動作は確認できます。

https://github.com/fengyuanchen/cropperjs

使い方

Cropper.jsを読み込む

$ npm install cropperjs

<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

または以下リンクからCDNをコピーしてペーストする。

https://cdnjs.com/libraries/cropperjs

Cropper.jsを初期化

対象にするimgタグでを用意します。
※divタグで囲み、そちらに必要なサイズを指定する必要があります。

<div style='width: 600px; height: 400px'>
  <img id="target" src="画像path">
</div>

scriptで、対象をnew Cropperで渡します。
第二引数にはオプションを渡すことができます。長くなるので、下に書いておきます。

let target = document.getElementById('target');
let cropper = new Cropper(target);

ここまでで、画像にトリミングパネルが表示されるようになります。
ですが、パネルが表示されてるだけでなにもできないので、トリミングできる処理をJSで書いていきます。

トリミング機能を実装する

画像の上にトリミングパネルを表示させることができたので、あとはメソッドを使って画像を好きな位置に指定し、切り取りを実行します。

<div style='width: 400px; height: 300px;'>
  <img id="target" src="https://cdn.pixabay.com/photo/2023/03/25/09/51/cat-7875506_960_720.jpg" width='400' height='300' style='object-fit: cover'>
</div>
<button id='button'>トリミング</button>
    
<div>
  <img id='preview'>
</div>

let target = document.getElementById('target');
let cropper = new Cropper(target);

let button = document.getElementById('button');
button.addEventListener('click', function () {
  // トリミングパネル内のcanvasを取得
  let canvas = cropper.getCroppedCanvas()
  // canvasをbase64に変換
  let data = canvas.toDataURL();
  
  let preview = document.getElementById('preview');
  // previewにセットする
  preview.src = data;
});

これだけでトリミングが実装できちゃいます！
上記コードや以下のdemoはそのまま表示していますが、変換したデータを必要な用途に使っていただければと思います。

demo

上記コードをdemoで実際に確認できます。

https://runstant.com/suico/projects/a53d1166

各オプションや機能のまとめ

詳しい情報や最新の情報は公式のdocumentを見ていただければと思います。
https://github.com/fengyuanchen/cropperjs#cropperjs

オプション

viewMode

Cropperの表示モードの設定。
0～3の数値を指定する形で、初期値は0。
0: 制限なし。
1: 切り抜き画像のサイズを超えないようにトリミングボックスを制限する。
2: コンテナの範囲内に収まるように画像の最小サイズを制限する。(コンテナの短辺を合わせて、足りない部分は余白になる。)
3: コンテナの範囲内に収まるように画像の最小サイズを制限する。(コンテナの長辺を合わせて、足りない部分がない状態になる。)

dragMode

トリミングボックス外の切り抜き画像をドラッグした時の動作を設定。
初期値はcrop。
crop: 新しいトリミングボックスを作成する。
move: 切り抜き画像を移動する。
none: 何もしない。

initialAspectRatio

トリミングボックスの初期アスペクト比を設定。
初期値はNaN。

aspectRatio

トリミングボックスの固定のアスペクト比を設定。
初期値はNaN。

data

トリミングの座標やサイズなどの初期情報を設定。
初期値はnull。

preview

プレビューを追加する要素を設定。
初期値は”。

responsive

ウインドウサイズ変更時に再レンダリングするかどうかを設定。
初期値はtrue。

restore

ウインドウサイズ変更時にトリミングされた領域を復元するかどうかを設定。
初期値はtrue。

checkCrossOrigin

クロスオリジン画像であるかを確認するかどうかを設定。
初期値はtrue。

checkOrientation

画像のExif方向情報を確認するかどうかを設定。
初期値はtrue。

画像とトリミングボックスの間に黒い半透明のレイヤーを挟むかどうかを設定。
初期値はtrue。

guides

トリミングボックスの上には線を表示するかどうかを設定。
初期値はtrue。

center

トリミングボックスの中央にインジケーターを表示するかどうかを設定。
初期値はtrue。

highlight

トリミングボックスの上に白い半透明のレイヤーを重ねるかどうかを設定。
初期値はtrue。

background

コンテナ内の余白部分にグリッド状の背景を表示するかどうかを設定。
初期値はtrue。

autoCrop

初期状態で画像をトリミングできる状態にするかどうかを設定。
初期値はtrue。

autoCropArea

初期状態のトリミングボックスのサイズ(パーセント)を設定。
初期値は0.8。

movable

画像を移動できるかどうかを設定。
初期値はtrue。

rotatable

画像を回転できるようにするかどうかを設定。
初期値はtrue。

scalable

画像を拡大・縮小できるようにするかどうかを設定。
初期値はtrue。

zoomable

画像をズームできるようにするかどうかを設定。
初期値はtrue。

zoomOnTouch

タッチ操作で画像をズームできるようにするかどうかを設定。
初期値はtrue。

zoomOnWheel

画像をマウスホイールでズームできるようにするかを設定。
初期値はtrue。

wheelZoomRatio

マウスホイールで画像をズームする時の倍率を設定。
初期値は0.1。

cropBoxMovable

ドラッグでトリミングボックスを移動できるようにするかを設定。
初期値はtrue。

cropBoxResizable

ドラッグでトリミングボックスをリサイズできるようにするかを設定。
初期値はtrue。

toggleDragModeOnDblclick

コンテナをダブルクリックした時に、ドラッグモードを”crop”と”move”で切り替えるかどうかを設定。
初期値はtrue。

minContainerWidth

コンテナの最小幅を設定。
初期値は200。

minContainerHeight

コンテナの最小高さを設定。
初期値は100。

minCanvasWidth

画像の最小幅を設定。
初期値は0。

minCanvasHeight

画像の最小高さを設定。
初期値は0。

minCropBoxWidth

トリミングボックスの最小幅を設定。
初期値は0。

minCropBoxHeight

トリミングボックスの最小高さを設定。
初期値は0。

ready

準備完了後に実行する処理を関数で設定。
初期値はnull。

cropstart

キャンバスまたはトリミングボックスの変更開始時に実行する処理を関数で設定。
初期値はnull。

cropmove

キャンバスまたはトリミングボックスの変更中に実行する処理を関数で設定。
初期値はnull。

cropend

キャンバスまたはトリミングボックスの変更終了時に実行する処理を関数で設定。
初期値はnull。

crop

キャンバスまたはトリミングボックスが変更された時に実行する処理を関数で設定。
初期値はnull。

zoom

ズーム時に実行する処理を関数で設定。
初期値はnull。

メソッド

crop()

トリミングボックスを表示する。

reset()

画像とトリミングボックスを初期状態にリセットする。

clear()

トリミングボックスをクリアする。

replace(url[, hasSameSize])

画像を置き換えてcropperを再構築する。

enable()

cropperを有効化する。

disable()

cropperを無効化する。

destroy()

cropperを破棄する。

move(offsetX[, offsetY])

指定分だけ画像を移動する。

moveTo(x[, y])

指定座標に画像を移動する。

zoom(ratio)

指定分だけ画像をズームする。

zoomTo(ratio[, pivot])

指定した比率に画像をズームする。

rotate(degree)

指定分だけ画像を回転する。

rotateTo(degree)

指定した角度に画像を回転する。

scale(scaleX[, scaleY])

画像を拡大・縮小する。

scaleX(scaleX)

画像をX軸方向に拡大・縮小する。

scaleY(scaleY)

画像をY軸方向に拡大・縮小する。

getData([rounded])

最終的なトリミングの位置やサイズのデータを取得する。

setData(data)

トリミングの位置やサイズのデータを設定する。

getContainerData()

コンテナのサイズを取得する。

getImageData()

画像の座標やサイズなどのデータを取得する。

getCanvasData()

キャンバスの座標やサイズなどのデータを取得する。

setCanvasData(data)

キャンバスに座標やサイズなどのデータを設定する。

getCropBoxData()

トリミングボックスの座標やサイズのデータを取得する。

setCropBoxData(data)

トリミングボックスに座標やサイズのデータを設定する。

getCroppedCanvas([options])

トリミング後の画像を描画したcanvasを返す。
canvasをそのまま表示するか、toDataURL()を使ってData URLを取得して使用する。

setAspectRatio(aspectRatio)

トリミングボックスのアスペクト比を設定する。

setDragMode([mode])

ドラッグモードを変更する。

イベント

ready

準備完了後に実行する処理を関数で設定。
初期値はnull。

cropstart

キャンバスまたはトリミングボックスの変更開始時に実行する処理を関数で設定。
初期値はnull。

cropmove

キャンバスまたはトリミングボックスの変更中に実行する処理を関数で設定。
初期値はnull。

cropend

キャンバスまたはトリミングボックスの変更終了時に実行する処理を関数で設定。
初期値はnull。

crop

キャンバスまたはトリミングボックスが変更された時に実行する処理を関数で設定。
初期値はnull。

zoom

ズーム時に実行する処理を関数で設定。
初期値はnull。

おわりに

今回はCropper.jsを使って画像のトリミングを機能の実装方法を紹介しました。
かなり楽に導入できて、使いやすいので、トリミング機能を実装ぜひ使ってみてください。

Rabee Tech blog
Rabee Tech blogPublication

Discussion