サイト制作に関するメモ書き

HOME > JavaScript > Cropper.jsを使ってみる

Cropper.jsを使ってみる

ページ上で画像のトリミングなどができるJavaScriptライブラリ「Cropper.js」を使ってみます。

設定方法

Githubのページから一式をダウンロードします。
ファイル解凍後、下記ファイルを読み込ませます。

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

HTMLに切り抜く画像を用意します。

<div class="cropper-area">
  <img id="cropper-img" src="cat.jpg">
</div>

imgをdivで囲っておく必要があるようです。
imgのidはJavaScriptの設定で使用しますが、divのclassはなくても大丈夫です。

次に切り抜き対象のimgに対してCSSを設定します。

.cropper-area img {
  display: block;
  max-width: 100%;
}

最後にJavaScriptでの設定です。

var cropperImg = document.getElementById('cropper-img');
var cropper = new Cropper(cropperImg);

これでCropper.jsの設定をすることができました。
Cropper.jsのデモページ

ただ、これだけだと範囲選択しかできない状態なので、切り抜きもできるように設定してみます。
まずHTMLに切り抜きボタンと切り抜き後の画像を出力するエリアを追加します。

<div class="result">
  <p>切り抜き後の画像</p>
  <img id="result-img">
</div>

<div class="cropper-area">
  <img id="cropper-img" src="cat.jpg">
</div>

<button id="crop-btn">切り抜き</button>

JavaScriptで切り抜きのボタンをクリックした時の処理を追加します。

var cropperImg = document.getElementById('cropper-img');
var cropper = new Cropper(cropperImg);

document.getElementById('crop-btn').addEventListener('click', function () {
  resultImgUrl = cropper.getCroppedCanvas().toDataURL();
  var result = document.getElementById('result-img');
  result.src = resultImgUrl;
});

getCroppedCanvas()とtoDataURL()でData URLを取得して、結果表示用のimgタグに設定しています。
Cropper.jsのデモページ2

オプション

オプションについて詳しくは公式のドキュメントをご確認ください。

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。
デモページ
modal 画像とトリミングボックスの間に黒い半透明のレイヤーを挟むかどうかを設定。
初期値は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。
デモページ

今回はJavaScript版のライブラリを紹介しましたが、jQuery版もあるようです。

【参考サイト】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP