使用 CSS/Javascript 进行图像模糊：有可能吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5077759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image blur with CSS/Javascript: is it possible?
提问by Olivier Lalonde
Is it possible to add a blur effect to an image using CSS and Javascript?
是否可以使用 CSS 和 Javascript 为图像添加模糊效果？
回答by Barrie Reader
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...
Pixastic 是一个实验性库，它允许您仅使用一点 JavaScript 就可以对图像执行各种操作。开箱即用支持的效果包括去饱和度/灰度、反转、翻转、亮度/对比度调整、色调/饱和度、浮雕、模糊等等...
Pixastic 使用 HTML5 Canvas 元素工作，该元素提供对原始像素数据的访问，从而为更高级的图像效果开辟了道路。这就是“实验”部分发挥作用的地方。只有某些浏览器支持 Canvas，不幸的是 Internet Explorer 不是其中之一。然而，它在 Firefox 和 Opera 中都得到了很好的支持，并且仅在最近的 Safari 4（测试版）版本中才支持 Safari。Chrome 目前在开发频道中工作。使用古老的专有过滤器在 IE 中模拟了一些效果。虽然这些过滤器比它们的 Canvas 朋友快得多，但它们很少且有限。希望有一天我们也能在 IE 上拥有真正的 Canvas ......
回答by Quasimondo
Alternatively you could use StackBluror Superfast Blur
或者，您可以使用StackBlur或Superfast Blur
回答by Luckylooke
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/12/14/item-blur-effect-with-css3-and-jquery/
http://tympanus.net/codrops/2011/11/18/fullscreen-image-blur-effect-with-html5/
http://tympanus.net/codrops/2011/11/18/fullscreen-image-blur-effect-with-html5/
回答by Jonathan James
StackBlur works: Here's how I'm using it: also, works on all browsers and ipad!! unlike webkit!!
StackBlur 的工作原理：这是我使用它的方式： 此外，适用于所有浏览器和 ipad！不像webkit！！
download StackBlur v5.0 from here: StackBlurv5.0
从这里下载 StackBlur v5.0：StackBlurv5.0
HTML
HTML
<CANVAS ID="top"></CANVAS>
<SCRIPT TYPE="text/javascript" SRC="js/StackBlur.js"></SCRIPT>
CSS
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
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.
注意：stackBlurCanvasRGB 函数的半径值的范围可以从我认为 100 到 -100.. 只是玩玩值，你会得到它的工作。..CanvasRGB 在 iPad 上的运行速度比 CanvasRGBA 快.. 至少这是我在 iPad 4th gen 上注意到的。
回答by Jaspreet Jolly
Using CSS
使用 CSS
.cbp-rfgrid li:hover img {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
filter: blur(2px);
}
回答by Raj Sharma
With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image. For Chrome
使用 CSS3，我们可以轻松调整图像。但请记住，这不会改变图像。它只显示调整后的图像。铬
See live demo and complete source code here
在此处查看现场演示和完整源代码
http://purpledesign.in/blog/adjust-an-image-using-css3-html5/
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);
}
