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');
画像が切り替わらないとかはキャッシュ確認。
関連記事
-
-
tableタグ内のデータをCSV形式でダウンロードできる「jQuery-csvExport」ライブラリの使用方法
HTMLのtableタグ内のデータをCSV形式でエクスポートさせたいケースがあっ ...
-
-
JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法
ある動画サイトを閲覧していた際にウィンドウが非アクティブになると視聴中の動画が止 ...
-
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
-
jQuery.uploadでリアルタイムプレビュー
やりたい事は、 ・<input type="file">で画像を選択 ...
-
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...