Blog スタッフブログ

JavaScript

Cropper.jsで画像をトリミングする方法

Cropper.jsとはweb上で画像をトリミングすることができるjavascriptライブラリです。

これを用いてwebサイト上で画像をトリミングする方法をご紹介します。

こちらにデモページがあります。

Cropper.js

Cropper.jsの導入

Cropper.jsをダウンロードして、cropper.cssとcropper.jsを読み込みます。

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

トリミングする画像をhtmlに表示

<figure>
  <img id="cropperImg" src="example.jpg">
</figure>
<figure>
  <img id="preview">
</figure>
<button id="cropperBtn">
実行
</button>

id=”cropperImg”がトリミングする画像でid=”preview”がトリミング後の画像を表示する箇所になります。

最初はプレビューは空にしておくのでsrc=””は設定しません。

buttonをクリックした時にトリミングを実行したいのでトリミング用のbuttonを表示しています。

トリミング処理を実装

<script>
	var cropperImg = document.getElementById('cropperImg'); //トリミング対象を選択
	var cropper = new Cropper(cropperImg);

	document.getElementById('cropBtn').addEventListener('click', function () {　//トリミングを実行
	  resultImgUrl = cropper.getCroppedCanvas().toDataURL(); //トリミング後の画像をURLを変数に
	  var result = document.getElementById('preview');
	  result.src = resultImgUrl; //'preview'のsrcに代入
	});
</script>

javascriptでトリミング対象と実行する処理を記述します。

ここまででトリミングの基礎的な箇所は実装できました。

ただトリミングするだけの処理ですがこれ単体で運用することはあまりないかと思います。

これをさらにカスタマイズすることでPCから画像を選択してトリミング画像をサーバーに保存するなどの応用もできます。

戻る一覧へ戻る