Cropper - スマートフォンにも対応した画像切り抜きライブラリ MOONGIFT
スマートフォンやデジカメで撮影した写真は横長、または縦長です。それに対してWebサービスのプロフィールに使う画像は大抵正方形ではないでしょうか。そんな写真を自動で加工すると顔の一部が削れてしまう可能性があります。 そこでユーザ自身の手で切り抜きしてもらうのが一番です。今回はスマートフォンにも対応したCropperを紹介します。 Cropperの使い方 Cropperのデモ画面です。左側の画像が元画像、切り抜いた時の各サイズの画像が右に並んでいます。 もちろん切り抜き部分のサイズ、位置は自由に変えられます。 クロップした画像。 画像サイズも指定できます。 スマートフォンでも動きます。 ハンドル部分もスムーズにつかめます。 Cropperを使えばユーザに自分の写真をアップしてもらった後、そのまますぐに切り抜き加工を行えるようになります。かつ切り抜いた画像をサーバに送れるので、サーバ側では画像ラ
jQuery非同期、Image()で画像読み込み表示｜jquery｜POPSブログ｜POPS WEB KOUBOU
jQueryで、画像読み込み表示には色々な方法はありますが、javascriptの new Image()を使用して表示させる例が多いようです。 new Image()での、画像読み込み表示 jQueryで、画像読み込み表示には色々な方法はありますが、javascriptの new Image()を使用して表示させる例が多いようです。ネットで調べれば沢山の情報がありますが、私の場合の経験を踏まえて記述します。 Image()が使用される理由は、 1. 表示サイズではなく画像の実寸を得ることができる。 2. 画像にアクセスして、ロード完了を知ることができる。 3. ERRORの場合の処理ができる。(余り使用はされていないが、、) 4. Loading中の「Loading画像」など表示させる時に便利。 5. jQueryで画像のロードに適したメソッドがない。(ほとんどが、html text な
コンテナのサイズに合わせて画像をフィットさせるスクリプト・imagefill.js
コンテナのサイズに合わせて自動的に画像をフィットさせる、というスクリプトのご紹介です。jQueryに依存しています。RWDなんかと相性良さそうですね。 コンテナに合わせてフィットさせる、というもの。似たスクリプトは既存しますので選択肢の一つとして。 サイズに応じて自動でフィットさせます。 ↑ こんな感じ。 $('.foo').imageFill();基本的にはコンテナをセレクタとして指定するだけ。 <div class="foo"> <img src="bar.png"> </div>そのコンテナの中に画像を含めます。楽でいいですね。 ライセンスはMITとGPLのデュアルライセンスとなっています。詳細は以下にて。 imagefill.js
背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」 – bl6.jp
WallpaperというjQueryプラグインを使えば背景画像のレイアウトをブラウザ幅に合わせることができます。ブラウザ幅を縮小したり拡大することによって、そのサイズに最適化された配置に調整されるのでいろんなデバイスで見ることができますね。とても便利なので覚えておきたいプラグインです。 [ads_center] Wallpaperの使い方 このようにブラウザ幅のサイズによって背景画像のレイアウトが調整されます。 以下は縮小時。 使い方もシンプルですね。 $("#element").wallpaper({ source: "path/to/image.jpg" }); Wallpaper
要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」:phpspot開発日誌
Wallpaper/Projects/Ben Plum 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 div等のエレメントに設定した背景が自然に自動伸縮されていい感じにしてくれるプラグインです。 ブラウザサイズによってはせっかくカッコよく設定した背景画像が台無しになることがこれまでもありましたが、このプラグインでもうそういったことはなくなりそう。 デモページ 関連エントリ レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」 レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carou
[JS]サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できるスクリプト -Image Scale
画像の長い辺に合わせて、フィット Image Scaleの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery.js" type="text/javascript"></script> <script src="image-scale.js" type="text/javascript"></script> </head> Step 2: HTML 大きさを調整したい画像に「class=scale」を加えます。 <div class="image-container"> <img class="scale" src="img/example.jpg"> </div> さらに、画像の位置などを設定する場合はdata属性を加えます。 <div class="image-c
コンテナに画像をフィットさせられるjQueryプラグイン「imagefill.js」:phpspot開発日誌
imagefill.js | Project Page コンテナに画像をフィットさせられるjQueryプラグイン「imagefill.js」 HTMLの指定した位置に画像をフィルさせたい場合に使えます。 次のように、画像を特定サイズのブロックに適度に拡大させておさめられます。 それ用の画像を作る必要はもうなく、動的にフィットさせられるというのは便利でレスポンシブWEBデザインにも使えます 関連エントリ 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」 画像のカーソル位置を拡大できるjQueryプラグイン「mlens」 マウスホバーだけの簡単操作で画像をズームできて便利な「jQuery Zoom」
画像hover時にテキスト等を表示するjQueryプラグイン – creamu
jQuery ContentHover Pluginは、画像hover時にテキスト等を表示するjQueryプラグインです。 補足情報をシンプルに見せる形として、省スペースで効果的ではないでしょうか。 アニメーションも気が利いていて、透過度などを変更することができます。 jQuery ContentHover Plugin
[JS]背景画像やスライドショーをブラウザいっぱいに表示するスクリプト -Vegas
写真画像をブラウザいっぱいに表示し、ウェブページにフル表示の背景画像やスライドショーを設置するjQueryのプラグインを紹介します。 ドットベースのオーバーレイ用の画像が数多く用意されているので、画像にスタイリッシュなエフェクトを加えることも簡単にできます。 デモページ サムネイルをクリックすると、写真画像が変更されます。 Vegasの実装 外部スクリプト 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="/vegas/jquery.vegas.js"></script> スタイルシート スタイルシートもあらかじめ用意されており、外部ファイルとして指定します。 <link rel="st
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
