https://github.com/bdbch/html-imageblur
Web Component for adaptive, blurred images
https://github.com/bdbch/html-imageblur
blurred-images custom-elements customelements image-blur webcomponents
Last synced: 2 months ago
JSON representation
Web Component for adaptive, blurred images
- Host: GitHub
- URL: https://github.com/bdbch/html-imageblur
- Owner: bdbch
- Created: 2018-04-21T23:32:01.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-24T02:13:24.000Z (about 2 years ago)
- Last Synced: 2025-03-09T23:07:15.167Z (3 months ago)
- Topics: blurred-images, custom-elements, customelements, image-blur, webcomponents
- Language: JavaScript
- Size: 187 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ``
> Custom Element for adaptive, blurred images via src attributes.
### [Live Demo (try to change attributes in dev tools)](https://bdbch.github.io/html-imageblur/)
`image-blur` creates an adaptive, blurred version of an image src with full control over the blur value without using CSS3.
## Installation
`npm install --save html-imageblur`
## Usage
#### ES6:
```js
import "html-imageblur"
```
#### Via `` in ES6
```js
<script src="build/image-blur.js">
```
#### Via `` in ES5
```js
<script src="build/image-blur.es5.js">
```
When image-blur is loaded correctly, you can just use it like this:
```html
```
You can style the image-blur component and the canvas inside will adapt itself to your styles.
## Browser Support
This will need an update to find out what browsers are currently supporting all features
## Contribution
Feel free to send in Pull Requests. I'll take my time to look into them.