CSS/Javascript图片模糊：是否可行？

Question

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

- Olivier Lalonde

Answer 1

没错，这个非常好用：

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

Pixastic通过利用HTML5 Canvas元素来获取原始像素数据来工作，因此可以开展更高级的图像特效。这是"实验性"部分发挥作用的地方。Canvas仅受某些浏览器支持，不幸的是Internet Explorer不是其中之一。但它在Firefox和Opera中得到了良好的支持，并且对于Safari，最近的Safari 4（beta）版本刚刚加入了对其的支持。Chrome目前在dev频道中运行。一些效果已经在IE中使用年老的专有滤镜进行了模拟。虽然这些滤镜比它们的Canvas朋友快得多，但数量很少而且功能受限。希望有一天我们也能在IE上拥有真正的Canvas…

- Barrie Reader

---

别再扫大家的兴了，卸载IE6，跟上潮流吧！（虽然+1还是要感谢的） - Barrie Reader

@Clyde Lobo：如果您查看该网站，您会发现它可以在IE8上正常运行，而IE8显然不支持HTML5，且示例也能正常工作。 - Neil Knight

@Ardman：在"How"部分中，它说Pixastic通过利用HTML5 Canvas元素来提供对原始像素数据的访问，据我所知IE 8没有Canvas，那么它如何在其中工作呢？ 顺便说一句，这个库真的很棒;) - Clyde Lobo

如果您阅读该站点，它会说：“一些效果已经使用古老的专有过滤器在IE中模拟。虽然这些过滤器比它们的Canvas朋友快得多，但它们很少且有限。”例如，主页上的灰度效果适用于IE8。我想任何filter效果都可以在即使是IE6中运行。 - thirtydot

这已经是八年前的事了，你还期望什么？ - Barrie Reader

Answer 2

或者你可以使用StackBlur或Superfast Blur。

- Quasimondo

---

谢谢您。StackBlur的速度非常棒。 - jrista

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/

- Luckylooke

Answer 4

使用CSS

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

- Jaspreet Jolly

---

再简单不过了。 - Julio S.

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之间。只需尝试不同的值，你就能使其正常工作。 在iPad上，CanvasRGB比CanvasRGBA快，至少我在第四代iPad上是这样观察到的。

- Jonathan James

Answer 6

使用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);
}

- Raj Nandan Sharma

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

- Narges