Javascript+jQuery,对背景图像应用模糊效果

最简单、最跨浏览器友好的方法是提前创建背景图像的模糊和非模糊版本,并在需要时使用JavaScript交换模糊版本。比如:

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

编辑: 这是一个有点逃避,但所有你需要做的是创建一个新的图像元素的皮克斯操作。因为Pixastic使用画布,所以您可以让库为您完成工作,然后只需调用 toDataURL() background-image CSS。

非常基本的演示 here . 在Chrome和Firefox中测试。

• 我无法在不到5分钟的时间内让它在IE8中工作(尽管这可能是Pixastic的) cross-browser support info )-我对IE没有耐心。
• 要模糊的图像必须与要模糊它们的页面来自同一原点(域和子域)。 否则,您将得到一个安全异常(并且不会出现模糊)。这是的安全功能 canvas ,根据 the spec
• 如果你对同一张图片进行任何类型的重复模糊,我强烈建议你缓存 toDataURL() 在引擎盖下工作,所以这可能不是完全直接的。

快乐模糊!

我用常规的方法来使用pixastic和模糊图像。 然后在我的例子中创建了一个canvas元素。 我确保这个canvas元素有一个id,通过获取它的数据,我使用这些数据来设置我的背景图像。

例子:

HTML格式:

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

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索引的,我不会模糊吨的图像。

有一个jquery插件blur.js 这正是你要找的。