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

Question

My users upload background images. These images are stored in CDN on Amazon S3 (not on the same server).

Currently, the way I do the background is this.

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

It's position fixed, and I use javascript to set the background-image.

I would like to BLUR this background on the client side. How can I do this?

Blur.js does not work with an image on Amazon CDN.

Answer 1

You could always try using the Pixastic library (as long as you don't mind using HTML5 features):

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

Answer 2

You can use css filters to do this, but only in super new browsers. That and a combo of SVG filters will get you a few browsers. I guess you could then fall back to canvas, and excanvas to get almost all browsers.

Really, I'd just use filters, in a year or so most users will have them.

Answer 3

Currently, you can use style.filter, see example below:

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

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

Tested on Chrome Version 86.0.4240.198 (Official Build) (x86_64) and it works.