勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

   2024/04/18  jQuery

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定した部分を別の画像として保存したかった。

画像の保存とかアップロードはいけるんだけど、範囲指定してトリミングする部分をJcropというjQueryのプラグインを用いることでなんとかなりそう。

 

Jcrop

http://deepliquid.com/content/Jcrop.html

 

サンプル

https://taitan916.info/sample/jcrop/

基本的にはそのまま使えそうなんだけどアスペクト比を保たない場合以下の部分取り外す。

aspectRatio: 1

あとは以下のような形で保存すればよい。

imagejpeg($dst_r,'hogehoge.jpg');

画像が切り替わらないとかはキャッシュ確認。

 - jQuery

  関連記事

Lightboxで画像拡大時に文字タイトルとリンクをつける
Lightboxで画像拡大時に文字タイトルとリンクをつける

lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...

国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法
国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法

GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...

jQuery Nice Selectを特定ページのみ無効にする方法
jQuery Nice Selectを特定ページのみ無効にする方法

bootstrap系のテンプレートデザインを使用したサイトを構築中に、セレクトメ ...

jQueryのanimate()でページスクロール後に他の処理を実行させる方法
jQueryのanimate()でページスクロール後に他の処理を実行させる方法

jQueryのanimate()でページスクロール後に特定の要素を非表示にしたい ...

jQueryにて複数のajax処理のレスポンスをまとめて表示する方法
jQueryにて複数のajax処理のレスポンスをまとめて表示する方法

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...