勉強したことのメモ

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

  関連記事

adblock(広告削除)設定している場合はページを表示させない
adblock(広告削除)設定している場合はページを表示させない

iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...

Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法
Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...

NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法
NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法

NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...

javascriptやjQueryで画像を書き換えても変わらない場合
javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...

日付の範囲指定用プラグイン「DateRangePicker」の利用方法
日付の範囲指定用プラグイン「DateRangePicker」の利用方法

日付型のデータを検索する際に開始・終了日のテキストボックスを用意し、それぞれにタ ...