勉強したことのメモ

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

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

   

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

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

 

Jcrop

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

 

サンプル

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

 

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

そういう場合は

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

あとは、

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

 

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

 - jQuery

  関連記事

imgタグとPHPでグラフ作成

プラグインやライブラリを使わずにグラフを作る 機会があったのでメモ。 ■サンプル ...

配列をjQueryで取り扱う

やりたかった事は、 ・テキストボックスが複数ある。そのページに送信するクエリによ ...

要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

スマホ対応カルーセルスライダーslickの使い方

イメージスライダーでslickという使ったことないjQueryプラグインを見かけ ...

jQueryでのやりたい事

フォーム周りをよく使うのでまとめておく。 ・テキストボックスのvalue取得、書 ...

画像の登録フォームにてjQueryプラグインを用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

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

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

Ajaxの負荷対策

Ajaxを使ってボタンを押した際に表示を切り替える処理。 都度Ajaxを使ってた ...

jQueryでボタンをクリックしてクリップボードにコピー

■2015/11/01追記 以下記事でライブラリとか無しで同様の機能がつけられる ...