ページ上で画像のトリミングなどができるJavaScriptライブラリ「Cropper.js」を使ってみます。
設定方法
Githubのページから一式をダウンロードします。
ファイル解凍後、下記ファイルを読み込ませます。
1 2 | <link rel="stylesheet" href="./cropper.css" /><script src="cropper.js"></script> |
HTMLに切り抜く画像を用意します。
1 2 3 | <div class="cropper-area"> <img id="cropper-img" src="cat.jpg"></div> |
imgをdivで囲っておく必要があるようです。
imgのidはJavaScriptの設定で使用しますが、divのclassはなくても大丈夫です。
次に切り抜き対象のimgに対してCSSを設定します。
1 2 3 4 | .cropper-area img { display: block; max-width: 100%;} |
最後にJavaScriptでの設定です。
1 2 | var cropperImg = document.getElementById('cropper-img');var cropper = new Cropper(cropperImg); |
これでCropper.jsの設定をすることができました。
Cropper.jsのデモページ
ただ、これだけだと範囲選択しかできない状態なので、切り抜きもできるように設定してみます。
まずHTMLに切り抜きボタンと切り抜き後の画像を出力するエリアを追加します。
1 2 3 4 5 6 7 8 9 10 | <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で切り抜きのボタンをクリックした時の処理を追加します。
1 2 3 4 5 6 7 8 | 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版もあるようです。
コメントが承認されるまで時間がかかります。