勉強したことのメモ

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で画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...

JavaScriptにてテキストボックスにサジェスト機能を実装できる「autoComplete.js」の利用方法

以前にjQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する ...

ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法

formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...

javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...

JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法

あるシステムでCookieを保存している部分があった。ただ、日本語を保存している ...