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

Question

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

[编辑] 我所说的“模糊”是指高斯/运动模糊，而不是阴影 :)

谢谢。

Answer 1

执行此操作的最简单、最跨浏览器友好的方法是提前创建背景图像的模糊和非模糊版本，并在需要时使用 JavaScript 交换模糊版本。像这样的东西:

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

---

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

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

注释:

• 我无法在 5 分钟内让它在 IE 8 中运行(尽管它可能是可能的 - Pixastic 的 cross-browser support info)- 我对 IE 没有耐心。
• 您要进行模糊处理的图像必须与您要进行模糊处理的页面来自同一来源(域和子域)。否则，您将遇到安全异常(并且不会进行模糊处理).这是 canvas 的安全功能，根据 the spec .这就是为什么我的示例图像是 jsbin 的图标，而不是更大/更有趣/来自其他任何地方的图像。
• 如果您要对同一图像进行任何类型的重复模糊处理，我强烈建议缓存 toDataURL() 的结果，这样浏览器就不必重复其工作.我不知道 toDataURL() 是如何工作的，所以这可能不是很简单。

快乐模糊!