勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

  jQuery

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定した部分を別の画像として保存したかった。

画像の保存とかアップロードはいけるんだけど、範囲指定してトリミングする部分をJcropというjQueryのプラグインを用いることでなんとかなりそう。

 

Jcrop

http://deepliquid.com/content/Jcrop.html

 

サンプル

http://sample.taitan916.info/jcrop/

 

基本的にはそのまま使えそうなんだけど、比率が決められちゃってる? なんと言えばいいんだろう……こう、長方形型に切り抜きたいとかあるじゃないですか。

そういう場合は

aspectRatio: 1

の部分取り外したらいけた。

あとは、

imagejpeg($dst_r,'hogehoge.jpg');

とかで保存しちゃえばいい。

 

画像が切り替わらないとかはキャッシュ確認。

 - jQuery

  関連記事

jQueryで画像を遅延ロードする(jquery.lazyload.js)

画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...

jQueryで電話番号チェック

やりたかったことはjavascriptかjQueryで 電話番号のバリデート。 ...

画像をサムネイル⇔クリックで拡大(lightbox)

画像をサムネイル表示してクリックしたら大きく表示する というのがlightbox ...

classの取り扱い

jQueryでclassを扱う際、 //id=aaaにclass=testを付与 ...

スマホ対応のjQueryのカラーピッカープラグイン「excolor」の利用方法

以前の記事でカラーピッカープラグインのことを書いたけどスマホでは使えない。なので ...