勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)

   2024/04/15  JavaScript

あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミング処理を行うというシステムがあった。どうやっているんだろうとソースコードを見てみると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>

 

所感

業務で使うとなると恐らく画像アップロード→当該画像をトリミング→アップロード画像をトリミングした画像で上書きのような処理になりそう。その場合はこちらの記事が参考になりそう。

 

参考サイト

https://cly7796.net/blog/javascript/try-using-cropper-js/

https://cpoint-lab.co.jp/article/202208/23302/

 - JavaScript

  関連記事

バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法

サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...

JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法

先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...

PHPで画像を分割し並べ替えて出力したものをJavaScriptで復元する方法

ある電子書籍サイトをブラウザの開発者ツールで見てみたところ、PHPでページ画像を ...

JavaScriptでCookieを取り扱う「js-cookie」ライブラリの利用方法

「jquery-cookie」プラグイン開発終了に伴い「js-cookie」ライ ...

JavaScriptにてカラーコードのピッカーを実装できる「jscolor」の利用方法

フォームのテキストボックスにカラーコードのピッカーを実装したかった。HTMLのみ ...