勉強したことのメモ

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

  関連記事

ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法

他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガ ...

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

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

LightboxをjQuery無しで実装できる「Luminous」の利用方法

あるサイトのコーディングデータを貰った際、jQueryは使用していないのにLig ...

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

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

JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法

JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...