勉強したことのメモ

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

  関連記事

スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア(Fotorama)
スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア(Fotorama)

タブレット&スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルス ...

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

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

jQueryにて$.parseHTML()を用いてHTML文字列をDOMノードに変換する方法
jQueryにて$.parseHTML()を用いてHTML文字列をDOMノードに変換する方法

あるサイトのソースコードを拝見しているとjQueryで$.parseHTML() ...

jQueryで指定の行動をとった際に、クリックイベントを発火させる方法
jQueryで指定の行動をとった際に、クリックイベントを発火させる方法

あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、 ...

IE11でフォーム送信時に二重登録される
IE11でフォーム送信時に二重登録される

Internet Explorer11でform送信時にデータが二重登録されると ...