Custom Element for adaptive, blurred images via src attributes.
image-blur creates an adaptive, blurred version of an image src with full control over the blur value without using CSS3.
npm install --save html-imageblur
import "html-imageblur"<script src="build/image-blur.js"></script><script src="build/image-blur.es5.js"></script>When image-blur is loaded correctly, you can just use it like this:
<image-blur src="https://unsplash.it/800/600" blur="20">You can style the image-blur component and the canvas inside will adapt itself to your styles.
This will need an update to find out what browsers are currently supporting all features
Feel free to send in Pull Requests. I'll take my time to look into them.