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');
画像が切り替わらないとかはキャッシュ確認。
関連記事
-
-
jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法
jQueryで指定した要素のposition(leftやtop) / width ...
-
-
SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法
サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何ら ...
-
-
Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...
-
-
jQueryの「DateTimePicker」プラグインで日付や時間選択時に指定したイベントを実行させる方法
jQueryの「DateTimePicker」プラグインで日付や時間選択時、あら ...
-
-
ブラウザ上で何らかのファイルをダウンロードさせた際、ダウンロード完了のタイミングを検知する方法
ページ上でボタンをクリックすると画像やzipファイル等をダウンロードできるという ...