ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)
2024/04/15
あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミング処理を行うというシステムがあった。どうやっているんだろうとソースコードを見てみるとCropper.jsというライブラリを使っている模様。以下に実装方法のメモ。
サンプル
https://taitan916.info/sample/cropper.js/
ページ下部の切り抜きリンクをクリックするとページ上部に結果が表示される。
Cropper.jsについて
公式サイト
https://fengyuanchen.github.io/cropperjs/
CDN
現時点での最新版はv1.5.13となり、以下で利用可能。JSライブラリのためjQueryは必須では無い。
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js" integrity="sha512-6lplKUSl86rUVprDIjiW8DuOniNX8UDoRATqZSds/7t6zCQZfaCe3e5zcGaQwxa8Kpn5RTM9Fvl3X2lLV4grPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" integrity="sha512-cyzxRvewl+FOKTtpBzYjW6x6IAYUCZy3sGP40hn+DQkqeluGRCax7qztK2ImL64SA+C7kVWdLI6wvdlStawhyw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
異なるバージョンを使いたい場合は以下から探す。
https://cdnjs.com/libraries/cropperjs
ソースコード
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>cropper.jsサンプル</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" integrity="sha512-cyzxRvewl+FOKTtpBzYjW6x6IAYUCZy3sGP40hn+DQkqeluGRCax7qztK2ImL64SA+C7kVWdLI6wvdlStawhyw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.cropper-area img,
.result img{
display: block;
max-width: 50%;
}
</style>
</head>
<body>
<div class="result">
<img id="result-img">
</div>
<div class="cropper-area">
<img id="cropper-img" src="test.jpg">
</div>
<a id="crop-btn" href="javascript:void(0);">切り抜き</a>
<script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js" integrity="sha512-6lplKUSl86rUVprDIjiW8DuOniNX8UDoRATqZSds/7t6zCQZfaCe3e5zcGaQwxa8Kpn5RTM9Fvl3X2lLV4grPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const image = $('#cropper-img')[0];
const options = {aspectRatio: 1 / 1};
const cropper = new Cropper(image, options);
//切り抜きを押した場合
$('#crop-btn').on('click', function(){
//#result-imgのsrcに切り抜き後のURLを挿入
$('#result-img').attr('src', cropper.getCroppedCanvas().toDataURL());
});
</script>
</body>
</html>
所感
業務で使うとなると恐らく画像アップロード→当該画像をトリミング→アップロード画像をトリミングした画像で上書きのような処理になりそう。その場合はこちらの記事が参考になりそう。
参考サイト
関連記事
-
-
JavaScriptにて「QRCode.js」ライブラリを利用してQRコードを生成する方法
PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の ...
-
-
FileReader APIを用いて画像をアップロードせずにサムネイル表示
以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...
-
-
CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法
CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...
-
-
JavaScriptにてテキストボックスにサジェスト機能を実装できる「autoComplete.js」の利用方法
以前にjQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する ...
-
-
JavaScriptの「Day.js」ライブラリで日付の比較を行う方法
JavaScriptの日時・時刻用ライブラリ「Day.js」を用いて日付の比較を ...