使用 CSS/Javascript 进行图像模糊：可能吗？

Question

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

Answer 1

是的，这很不错：

Pixastic 是一个实验性库，允许您仅使用一点 JavaScript 对图像执行各种操作。开箱即用支持的效果包括去饱和/灰度、反转、翻转、亮度/对比度调整、色调/饱和度、浮雕、模糊等等...

Pixastic 的工作原理是利用 HTML5 Canvas 元素，该元素提供对原始像素数据的访问，从而实现更高级的图像效果。这就是“实验”部分发挥作用的地方。 Canvas 仅受某些浏览器支持，不幸的是 Internet Explorer 不是其中之一。然而，它在 Firefox 和 Opera 中都得到了很好的支持，而对 Safari 的支持只是在最近的 Safari 4（测试版）版本中才实现的。 Chrome 目前在开发通道中运行。使用古老的专有过滤器在 IE 中模拟了一些效果。虽然这些过滤器比它们的 Canvas 朋友快得多，但它们数量很少且有限。希望有一天我们也能在 IE 上拥有真正的 Canvas...

Answer 2

或者，您可以使用 StackBlur 或 超快速模糊

Answer 3

这也值得考虑：

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

使用CSS

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

Answer 5

StackBlur 的工作原理：这是我使用它的方式：
而且，适用于所有浏览器和 ipad！与 webkit 不同！！

从这里下载 StackBlur v5.0：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);

注意事项：
stackBlurCanvasRGB 函数的半径值范围可以从 100 到 -100.. 只要使用这些值，你就会让它工作。
..CanvasRGB 在 iPad 上比 CanvasRGBA 运行得更快..至少这是我在 iPad 4 上注意到的。

Answer 6

使用CSS3我们可以轻松调整图像。但请记住，这不会改变图像。它仅显示调整后的图像。对于 Chrome，

请在此处查看现场演示和完整源代码

http://purpledesign。在/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);
}

Answer 7

试试这个：

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" />