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

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

2014/06/27 2024/04/18 jQuery

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

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

Jcrop

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

aspectRatio: 1

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

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

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

: jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法

jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...

: 八地方区分→都道府県→路線→駅名の連携したセレクトメニューの実装方法

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

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

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

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

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