Question

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

Answer 1

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

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

Answer 2

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

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

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函数的半径值范围从I think 100到-100 ..只需使用值，您就可以使它工作。 ..CanvasRGB比iPad上的CanvasRGBA工作得更快..至少我在iPad第四代上注意到了这一点。

Answer 5

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

Answer 6

使用CSS

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

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

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

7 个答案: