Cropper - スマートフォンにも対応した画像切り抜きライブラリ MOONGIFT
スマートフォンやデジカメで撮影した写真は横長、または縦長です。それに対してWebサービスのプロフィールに使う画像は大抵正方形ではないでしょうか。そんな写真を自動で加工すると顔の一部が削れてしまう可能性があります。 そこでユーザ自身の手で切り抜きしてもらうのが一番です。今回はスマートフォンにも対応したCropperを紹介します。 Cropperの使い方 Cropperのデモ画面です。左側の画像が元画像、切り抜いた時の各サイズの画像が右に並んでいます。 もちろん切り抜き部分のサイズ、位置は自由に変えられます。 クロップした画像。 画像サイズも指定できます。 スマートフォンでも動きます。 ハンドル部分もスムーズにつかめます。 Cropperを使えばユーザに自分の写真をアップしてもらった後、そのまますぐに切り抜き加工を行えるようになります。かつ切り抜いた画像をサーバに送れるので、サーバ側では画像ラ
jQueryとCSS3で円の型抜きのホバー効果 | スターフィールド株式会社
CSS3のborder-radiusと、jQueryをつかって、 マウスでホバーしたときに円で型抜きをしたような効果ができないかやってみました。 ↓コチラが実際に作ってみたものです。 DEMO 方法 メインとなる画像の要素を設置し、position:relativeにする。 メインの画像を隠す要素を、メインの画像を隠すように、position:absoluteで設置する。 さらにその上に、型抜きの要素として使うborder-radiusで円型にした要素を、position:absoluteで設置し、背景画像をメインと同じものにする。 jQueryを使い、マウスの座標に合わせて型抜きの要素を移動し、同時に背景画像の位置も移動させる。 ポイントは、型抜きの要素の移動と、背景画像の移動を連動させることで、背景画像が一定の場所で止まっているように見せることです。 これによって、型抜きの要素の背景が
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://odyniec.net/projects/imgareaselect/examples-callback.html
