勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

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

   

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

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

 

Jcrop

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

 

サンプル

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

 

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

そういう場合は

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

あとは、

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

 

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

 - jQuery

  関連記事

FormDataを使ったAjax通信がiPhoneのみエラー

FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...

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

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

jQueryプラグイン使用時の注意

最近lightboxが急に動かなくなったという不具合があり 調べたところけっこう ...

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

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

リアルタイムプレビュー時の改行とテーブルの上部揃え

■サンプル http://sample.taitan916.info/previ ...

chardin.jsを利用して注釈を入れる

簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...

jQueryで関数処理中にブラウザのブロック(intro.js)

Ajaxで処理を行っている間、他の処理を行わせたくなかった。 「now load ...

jQueryのプラグインでカラーコードを視覚的に選択

カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...

PHPとSQLiteでi-mobileのデータをグラフ化

i-mobileでクリック保証のアフィリエイトだけど数値が並んでいるだけでグラフ ...

jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方

divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...