如何使用 Javascript 模糊背景图像？

Question

我的用户上传背景图片。 这些图像存储在 Amazon S3 上的 CDN 中（不在同一台服务器上）。

目前，我做背景的方式是这样的。

<div id="background"></div>

它的位置是固定的，我使用 javascript 来设置背景图像。

我想在客户端模糊这个背景。 我怎样才能做到这一点？

Blur.js 不适用于 Amazon CDN 上的图像。

Answer 1

您可以随时尝试使用 Pixastic 库（只要您不介意使用 HTML5 功能）：

http://www.pixastic.com/lib/

Answer 2

您可以使用 css 过滤器来做到这一点，但只能在超级新浏览器中使用。 这和 SVG 过滤器的组合将为您提供一些浏览器。 我想你可以回退到 canvas 和 excanvas 来获得几乎所有的浏览器。

真的，我只是使用过滤器，大约一年后，大多数用户都会拥有它们。

Answer 3

目前，您可以使用 style.filter，请参见下面的示例：

var element = document.getElementById("background");

element.style.filter = "blur(0px)";

在 Chrome 版本 86.0.4240.198 (Official Build) (x86_64) 上测试，它可以工作。