勉強したことのメモ

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

  関連記事

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

パスワードの強度を判定できる「zxcvbn」ライブラリの使用方法

アカウントを作成するようなページで偶にパスワードの強度を判定してメーターで表示さ ...

Gif画像に再生ボタンを設置し、ユーザーの操作により再生⇔停止が行える「gifffer」ライブラリの利用方法

あるページにGif画像を設置し、当該画像が表示されても自動再生させず、再生ボタン ...

バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法

サジェストや複数選択等、機能付きのセレクトメニュー(プルダウン)を実装する際、今 ...

「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...