Image blur with CSS/Javascript: is it possible?

Question

是否可以使用 CSS 和 Javascript 为图像添加模糊效果？

Answer 1

Yep, this works a treat :

Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/greyscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more...

Pixastic works by utilizing the HTML5 Canvas element which provides access to raw pixel data, thereby opening up for more advanced image effects. This is where the "experimental" part comes into play. Canvas is only supported by some browsers and unfortunately Internet Explorer is not one of them. It is however well supported in both Firefox and Opera and support for Safari only just arrived with the recent Safari 4 (beta) release. Chrome currently works in the dev channel. A few of the effects have been simulated in IE using the age old proprietary filters. While these filters are much faster than their Canvas friends, they are few and limited. Hopefully we will one day have real Canvas on IE as well...

Answer 2

或者，您可以使用StackBlur或Superfast Blur

Answer 3

This is also good to consider:

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/

Answer 4

Using CSS

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

Answer 5

StackBlur works: Here's how I'm using it: also, works on all browsers and ipad!! unlike webkit!!

download StackBlur v5.0 from here: StackBlurv5.0

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);

NOTES: Radius values for the stackBlurCanvasRGB function can range from I think 100 to -100.. just play with values, you'll get it working. ..CanvasRGB works faster than CanvasRGBA on iPad.. least that's what I'm noticing on iPad 4th gen.

Answer 6

With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image. For Chrome

See live demo and complete source code here

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

See the following code for more details.

To make an image gray:

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

To give a sepia look:

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

To adjust brightness:

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

To adjust contrast:

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

To Blur an image:

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

Answer 7

Try this:

 let blur = document.querySelector("#blur"); let girlImg = document.querySelector("#girlImg"); blur.addEventListener('input', blurring); function blurring(){ girlImg.style.filter = `blur(${blur.value}px)` }

 <div> <span>Blur:</span> <input type="range" id="blur" min="0" max="50" value="0"> </div> </br> <img id="girlImg" src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" alt="girlImg" />