円型での切り取りも可能な画像クロップライブラリ・「Cropme」 - かちびと.net
CropmeはJS製の画像クロップライブラリです。円型での切り取りや回転後の切り取りなどが可能となっています。バニラでもjquery併用でも対応可能です。 従来のクロップツールは画像が固定されていて、切り取る範囲を動かしたり拡大縮小するものが殆どですが、こちらは切り取る範囲を固定して、ドラッグで画像を動かしたり拡大、縮小、回転等を施して切り取るスタイルとなっています。 動作サンプル 適当に作った、動作確認出来るだけのサンプルです。切り取り範囲が固定されており、画像の回転等で切り取り範囲を変更する、みたいな流れで切り取ります。 ライブラリサイトではオプションを作成できるようにもなっているので割と手軽に導入できるんじゃないかなと思います。 var example = $('#container').cropme();//要素指定 example.cropme('bind', { url: 'h
Clip Pathで画像内の任意の箇所にスポットライトを当てる
Result CSSで任意の箇所にスポットライトを当てる、というもの やってる事は一番下のレイヤーに画像、2つ目のレイヤーに透過オーバーレイ、 3つ目のレイヤーに1つ目の画像と同じ画像を用意し、円状にくり抜いて重ねる、という感じです css.img-wrapper {/*親*/ display: grid; max-width: 600px; margin: 20px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8); } .img {/*1つ目のレイヤー*/ width: 100%; grid-area: 1 / 1; } .img--highlight {/*3つ目でくり抜き*/ clip-path: circle(100px at 55% 65%); } .img-layer {/*2つ目のレイヤーの透過オーバーレイ*/ backgrou
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Spotlight
