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

Question

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

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

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

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

我想在客户端吹嘘这个背景。我怎么能这样做？

Blur.js不适用于亚马逊CDN上的图像。

Answer 1

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

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

Answer 2

您可以使用css过滤器执行此操作，但仅限于超级新浏览器。这和SVG过滤器组合将为您提供一些浏览器。我想你可以回到画布上，而excanvas可以回到几乎所有浏览器。

真的，我只是使用过滤器，在一年左右的时间里，大多数用户都会拥有它们。

Answer 3

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

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

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

在Chrome版本86.0.4240.198（正式版）（x86_64）上进行了测试，并且可以正常工作。