Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)
2024/04/18
やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定した部分を別の画像として保存したかった。
画像の保存とかアップロードはいけるんだけど、範囲指定してトリミングする部分をJcropというjQueryのプラグインを用いることでなんとかなりそう。
Jcrop
http://deepliquid.com/content/Jcrop.html
サンプル
https://taitan916.info/sample/jcrop/
基本的にはそのまま使えそうなんだけどアスペクト比を保たない場合以下の部分取り外す。
aspectRatio: 1
あとは以下のような形で保存すればよい。
imagejpeg($dst_r,'hogehoge.jpg');
画像が切り替わらないとかはキャッシュ確認。
関連記事
-
-
SortableJSを使ってデータの並べ替え&保存
あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...
-
-
tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)
テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...
-
-
フォームの入力・選択内容を自動保存してくれる「Garlicjs」プラグインの利用方法
お問い合わせページ等、フォームを設置したページで入力・選択した内容を保存したい。 ...
-
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
-
ブラウザのSafariのみスクロール関連のイベントが発火しない場合の対応方法
jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...