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

オプション

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

メソッド

イベント

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