https://github.com/stephane-vanraes/svelte-multitoneimage

A simple image renderer to apply duotone effects for svelte.
https://github.com/stephane-vanraes/svelte-multitoneimage

javascript svelte

Last synced: about 1 month ago
JSON representation

A simple image renderer to apply duotone effects for svelte.

• Host: GitHub
• URL: https://github.com/stephane-vanraes/svelte-multitoneimage
• Owner: stephane-vanraes
• Created: 2020-01-10T21:07:19.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-10-31T09:29:33.000Z (about 2 months ago)
• Last Synced: 2024-10-31T09:29:42.419Z (about 2 months ago)
• Topics: javascript, svelte
• Language: Svelte
• Homepage:
• Size: 370 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Svelte Multitone Image

A simple image renderer to apply multitone effects for svelte.

[Demo page](https://stephane-vanraes.github.io/svelte-multitoneimage/)

## Basic usage

```html

```

## Props

### src

This is the origin of the image, equivalent of the `src` attribute on an  tag.

### alt

The alt text for the generated image.

### colors

An array of hex colors, the component will automatically parse both short and long hexcodes.

Defaults to `['#000', '#fff']` resulting in a grayscale image.

### exponent and amplitude

As a final step in the filter a gamma correction is passed on each channel, this correction is of the form:

`gamma = amplitude * pow(channel, exponent) + offset`

This gamma correction enhances the overall contrast in the image. A higher exponent will make the dark areas darker, while a higher amplitude brightens the lighter areas.

_The offset in this component will always be 0._