https://github.com/niklus/image-filter
image filter web component
https://github.com/niklus/image-filter
image-filter webcomponent
Last synced: 4 months ago
JSON representation
image filter web component
- Host: GitHub
- URL: https://github.com/niklus/image-filter
- Owner: Niklus
- License: mit
- Created: 2022-02-28T21:50:25.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-02-28T23:58:18.000Z (over 4 years ago)
- Last Synced: 2025-03-27T13:42:11.743Z (about 1 year ago)
- Topics: image-filter, webcomponent
- Language: HTML
- Homepage:
- Size: 78.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# image-filter web component
This is a web component for applying different filters to your image.
## Using this component
### Add the following script tag in the head of your .html page
```html
```
### Then in your html or jsx
```html
```
## API
### image-filter properties
- src (string)
- alt (string)
- width (string)
- height (string)
- class (string) : allows you to apply your own styles
- filter (string) : supported values shown below
### Supported Filter Values
- sepia
- invert
- grayscale
- blur
- contrast
- saturate
- huerotate
- shadow
- opacity
### Demo
- Look at the [DEMO](https://niklus.github.io/image-filter-demo/) and see the different styles applied
### Script tag
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
- Remember to add type="module" on your script tag as shown above
### Node Modules
- Run `npm install image-filter-component --save`
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
- Remember to add type="module" on your script tag as shown above