This is a web component for applying different filters to your image.
<script type="module" src="https://unpkg.com/image-filter-component@0.0.2/dist/image-filter/image-filter.esm.js"></script>
<image-filter
src="beach-time.jpg"
alt="Children at the beach"
width="500"
filter="sepia"></image-filter>
- src (string)
- alt (string)
- width (string)
- height (string)
- class (string) : allows you to apply your own styles
- filter (string) : supported values shown below
- sepia
- invert
- grayscale
- blur
- contrast
- saturate
- huerotate
- shadow
- opacity
- Look at the DEMO and see the different styles applied
- Put a script tag similar to this
<script type='module' src='https://unpkg.com/image-filter-component@0.0.2/dist/image-filter/image-filter.esm.js'></script>
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
- Run
npm install image-filter-component --save
- Put a script tag similar to this
<script type='module' src='node_modules/image-filter-component/dist/image-filter/image-filter.esm.js'></script>
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