勉強したことのメモ

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

  関連記事

jQueryにて特定のIDが存在するかチェックし分岐処理する方法
jQueryにて特定のIDが存在するかチェックし分岐処理する方法

jQueryにて特定のIDが存在するかチェックし分岐処理したいというケースがあっ ...

jQuery Alert Dialogsで表示後に処理したい
jQuery Alert Dialogsで表示後に処理したい

最近携わったサイトの中でJavaScript内に「jAlert」とかいう記述があ ...

jQueryでチェックボックスの全チェック&チェック解除する方法
jQueryでチェックボックスの全チェック&チェック解除する方法

フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...

amazon等のECサイトによくにあるアイテムの満足度を星マークで送信・表示する方法
amazon等のECサイトによくにあるアイテムの満足度を星マークで送信・表示する方法

amazon等のECサイトによくにあるアイテムの満足度を星マークかつ5段階で送信 ...

画像をドラッグ&ドロップでアップロード
画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...