勉強したことのメモ

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

  関連記事

FullCalendarでラベルごとに表示・非表示を切り替える方法
FullCalendarでラベルごとに表示・非表示を切り替える方法

Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...

JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法
JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法

ある動画サイトを閲覧していた際にウィンドウが非アクティブになると視聴中の動画が止 ...

AjaxのJSONP使用でPHPで作った配列をJSに返す方法
AjaxのJSONP使用でPHPで作った配列をJSに返す方法

AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...

jQueryにて特定のIDが存在するかチェックし分岐処理する方法
jQueryにて特定のIDが存在するかチェックし分岐処理する方法

jQueryにて特定のIDが存在するかチェックし分岐処理したいというケースがあっ ...

jQueryでAjax通信したデータをPHPで受け取り、zip化したファイルをダウンロードさせる方法
jQueryでAjax通信したデータをPHPで受け取り、zip化したファイルをダウンロードさせる方法

jQueryのAjaxで何らかのデータをPHP側に送信し、PHP側で当該データを ...