勉強したことのメモ

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

  関連記事

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

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

Ajaxでプラグイン無しのファイルアップロード方法

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...

jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...

バニラJS対応(jQuery非依存)の画像遅延読み込みライブラリ「lazysizes」の利用方法

あるサイトのコーディングデータを貰った際に「lazysizes」というJavaS ...

ローソク足のグラフをJavaScriptで描写する方法(highstock)

株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...