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

Question

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

[编辑]通过"模糊"我的意思是高斯/运动模糊而不是投影:)

谢谢.

Answer 1

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

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

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

非常基本的演示在这里.在Chrome,Firefox中测试过.

笔记:

• 我不能在5分钟内在IE 8中工作(虽然它可能 - Pixastic的跨浏览器支持信息) - 我对IE没有耐心.
• 您正在模糊的图像必须来自与您模糊它们的页面相同的来源(域和子域).否则,您将获得安全异常(并且不会模糊).根据规范canvas,这是一个安全功能.这就是为什么我的示例图像是jsbin的favicon,而不是更大/更有趣/来自其他任何地方的图像.
• 如果您正在对同一图像进行任何重复模糊,我强烈建议缓存结果,toDataURL()以便浏览器不必重复其工作.我不知道toDataURL()引擎盖下是如何工作的,所以这可能不是完全直截了当的.

快乐模糊!