ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)
あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミング処理を行うというシステムがあった。どうやっているんだろうとソースコードを見てみると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>
所感
業務で使うとなると恐らく画像アップロード→当該画像をトリミング→アップロード画像をトリミングした画像で上書きのような処理になりそう。その場合はこちらの記事が参考になりそう。
参考サイト
関連記事
-
-
JavaScriptでinputタグのtypeを変更
チェックボックスの状態によってinputタグのtypeをtext⇔passwor ...
-
-
無料でジオコーディング(住所→経度緯度)を行う
GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...
-
-
JavaScriptでUNIXタイムスタンプ取得
UNIXタイムスタンプを用いた際、 年月日からすぐUNIXタイムスタンプを出した ...
-
-
日付入力のテキストフォームにカレンダープラグインを導入
やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...
-
-
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...
-
-
JavaScriptのbeforeunloadイベントでページの離脱防止
何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...
-
-
getElementsByTagName
うろ覚えだけど業務中に、 document.getElementById('aa ...
-
-
jquery.cookie.jsで「$.cookie is not a function」エラー
フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...
-
-
JavaScriptで住所から経度緯度を取得する
やりたかった事はformに住所を入れてsubmitする際に、javascript ...
-
-
サイトにHTMLエディタ(WYSIWYG)を導入する方法
シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...