Question

有没有办法在Javascript / jQuery中对背景图像应用“模糊”效果？

[edit]“模糊”是指高斯/运动模糊而不是投影：）

谢谢。

Answer 1

最简单，最易于浏览器操作的方法是提前创建背景图像的模糊和非模糊版本，并使用JavaScript在需要时交换模糊版本。类似的东西：

$('#hoverMe').hover(function ()
{
    $(this).css('background-image', 'url(blurredBackground.png)');
});

编辑：这有点像警察，但您需要做的就是为Pixastic创建一个新的图像元素进行操作。由于Pixastic无论如何都使用了画布，您可以让库为您完成工作，然后只需调用toDataURL()来获取URL字符串。然后，将该字符串传递回background-image CSS。

非常基本的演示here。在Chrome浏览器中测试过。

注意：

我无法在5分钟内在IE 8中使用它（尽管它可能是 - Pixastic的cross-browser support info） - 我对IE没有耐心。
您模糊的图片必须来自与您模糊的页面相同的来源（域和子域）。否则，您将获得安全例外（并且不会模糊））。根据{{3}}，这是canvas的安全功能。这就是为什么我的示例图像是jsbin的favicon，而不是一个更大/更有趣/来自其他地方的图像。
如果您正在对同一图像进行任何重复模糊，我强烈建议缓存toDataURL()的结果，以便浏览器不必重复其工作。我不知道toDataURL()如何在幕后工作，所以这可能不是完全直截了当。

快乐模糊！

Answer 2

我今天遇到了同样的问题，我的解决方案如下。我使用常规方式使用像素和模糊图像。 Pixastic然后在我的情况下创建了一个canvas元素。我确保这个canvas元素有一个id，通过获取它的数据，我使用数据来设置我的背景图像。

示例：

HTML：

<div id="hiddenDiv" style="width:0px; height: 0px;"></div>

使用Javascript：

var img = new Image();
img.id = "blurredImage"
img.onload = function() {
    Pixastic.process(img, "blur", function(){
        var canvas = document.getElementById('blurredImage');
        var dataURL = canvas.toDataURL("image/png");
        document.getElementById('blurredImage').style.backgroundImage = 'url("' +  dataURL + '")';
    });
}
document.getElementById("hiddenDiv").appendChild(img);
img.src = "myimage.jpg";

这是一个很好的解决方法，但是我不得不使用浮动div，这使得我无法使用绝对位置，并且z-index和我不会模糊大量的图像。

古德勒克！

Answer 3

有这个jquery-plugin blur.js可以满足您的需求。

Javascript + jQuery，将模糊效果应用于背景图像

3 个答案: