web-dev-qa-db-ja.com

CSS / Javascriptによる画像のぼかし：可能ですか？

CSSとJavaScriptを使用して画像にぼかし効果を追加することは可能ですか？

javascriptjqueryhtmlcssblur
21
Olivier Lalonde

うん、 これは御馳走です ：

Pixasticは、ほんの少しのJavaScriptを使用して画像に対してさまざまな操作を実行できる実験的なライブラリです。デフォルトでサポートされている効果には、彩度/グレースケール、反転、反転、明るさ/コントラストの調整、色相/彩度、エンボス、ぼかしなどがあります...

Pixasticは、生のピクセルデータへのアクセスを提供するHTML5 Canvas要素を利用して機能し、より高度な画像効果を実現します。ここで、「実験的」な部分が始まります。 Canvasは一部のブラウザでのみサポートされており、残念ながらInternet Explorerはそれらの1つではありません。ただし、FirefoxとOperaの両方で十分にサポートされており、Safariのサポートは、最近のSafari 4（ベータ）リリースでのみ到着しました。Chromeは現在、 devチャネル。いくつかの効果は、IEで古くからある独自のフィルターを使用してシミュレートされています。これらのフィルターはCanvasの友達よりもはるかに高速ですが、数が少なく制限されています。うまくいけば、 IEにも実際のキャンバスがあります...

35
Barrie Reader

または、 StackBlur または Superfast Blur を使用することもできます

15
Quasimondo

これも考慮に入れるべきです：

http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

http://tympanus.net/codrops/2011/11/18/fullscreen-image-blur-effect-with-html5/

5
Luckylooke

StackBlurの動作：これが私が使用する方法です：また、すべてのブラウザとiPadで動作します!! webkitとは異なります!!

ここからStackBlur v5.0をダウンロード： StackBlurv5.

HTML

<CANVAS ID="top"></CANVAS>
<SCRIPT TYPE="text/javascript" SRC="js/StackBlur.js"></SCRIPT>

CSS

#top {                      
  border-radius:         28%;
  -o-border-radius:      28%;
  -webkit-border-radius: 28%;
  -moz-border-radius:    28%;
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 40;
  width: 208px;
  height: 208px;
}

JS

var topCan = document.getElementById("top");
var toptx  = topCan.getContext("2d");
toptx.drawImage(_specimenImage, 0, 0);
var blur   = 0;

blur       = Math.abs(_sliderF.getPosition(8, -8)); //this returns multiple values 
                                                    //based on a new slider position

stackBlurCanvasRGB("top", 0, 0, topCan.width, topCan.height, blur);

注：stackBlurCanvasRGB関数の半径の値は、100から-100の範囲であると考えられます。値を操作するだけで、機能します。 ..CanvasRGBは、iPadのCanvasRGBAよりも高速に動作します。少なくとも、iPad 4世代ではそれが気になります。

2
Jonathan James

CSSの使用

.cbp-rfgrid li:hover img {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
filter: blur(2px);
}
2
Jaspreet Jolly

CSS3を使用すると、画像を簡単に調整できます。ただし、これによってイメージが変わることはありません。調整された画像のみが表示されます。 Chromeの場合

こちらでライブデモと完全なソースコードをご覧ください

http://purpledesign.in/blog/adjust-an-image-using-css3-html5/

詳細については、次のコードを参照してください。

画像を灰色にするには：

img {
 -webkit-filter: grayscale(100%);
}

セピア調にするには：

img {
 -webkit-filter: sepia(100%);
}

明るさを調整するには：

img {
 -webkit-filter: brightness(50%);
}

コントラストを調整するには：

img {
 -webkit-filter: contrast(200%);
}

画像をぼかすには：

img {
 -webkit-filter: blur(10px);
}
1
Raj Sharma