# lens-filter-color

> Small library to apply a color transformation to a image

Latest version **0.0.8** (published 2018-06-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install lens-filter-color
pnpm add lens-filter-color
yarn add lens-filter-color
bun add lens-filter-color
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2018-06-10 |
| First published | 2018-06-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 739.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ricardo Canastro |
| Maintainers | canastro |
| Keywords | image, lens-filter-color, filter, filters, processing, manipulation, color, transformation, pixel |

## Links

- npm: https://www.npmjs.com/package/lens-filter-color
- Repository: https://github.com/canastro/lens
- Homepage: https://github.com/canastro/lens#readme
- Issues: https://github.com/canastro/lens/issues
- npm.io page: https://npm.io/package/lens-filter-color

## Dependencies (1)

- [lens-core](https://npm.io/package/lens-core.md) ^0.0.8

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 0.0.8 (latest) — 2018-06-10
- 0.0.7 — 2018-06-10
- 0.0.6 — 2018-06-09
- 0.0.5 — 2018-06-06
- 0.0.4 — 2018-06-05
- 0.0.2 — 2018-06-04
- 0.0.1 — 2018-06-04

## README

[![npm version](https://badge.fury.io/js/lens-filter-color.svg)](https://badge.fury.io/js/lens-filter-color)

# lens-filter-color

Small browser library to apply a color transformation to a image relying on `lens-core` handle the transformation and distribute work with webworkers.

Check out [lens monorepo](https://github.com/canastro/lens) for other related modules

# Install

```
npm install lens-filter-color --save
```

# Usage
It applies a color transformation to a base64 image. If you want a more complete library, please check [lens-chainable](https://www.npmjs.com/package/lens-chainable) that wraps this and other libraries to provide a more complete suite of image filters.

This library consumes ImageData and outputs ImageData in a Promise. You can use `lens-core` to convert from ImageData to dataURL.

JS file:
```js
import color from 'lens-filter-color';
import ColorInterval from 'lens-filter-color/color-interval';

const colorIntervalBlue = new ColorInterval({
    from: { r: 0, b: 40, g: 100 },
    to: { r: 80, b: 100, g: 150 },
    match: { r: 0, b: 255, g: 255 },
    noMatch: { r: null, b: null, g: null, a: 150 }
});

const colorIntervalPink = new ColorInterval({
    from: { r: 120, b: 30, g: 70 },
    to: { r: 150, b: 60, g: 100 },
    match: { r: 255, b: 0, g: 255, a: 255 }
});

color({
    data: IMAGE_DATA, 
    options: { colorsInterval: [colorIntervalBlue, colorIntervalPink] }, 
    nWorkers: 4
});
```

# Frequent questions:
## How can I get image data from a image tag?

```js
const element = document.getElementById('#dummy-image');
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.drawImage(element, 0, 0 );
const imageData = context.getImageData(0, 0, element.width, element.height);
```

## How can I get image data from url?

```js
const element = document.createElement('img');
element.setAttribute('src', options.url);

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.drawImage(element, 0, 0 );
const imageData = context.getImageData(0, 0, element.width, element.height);
```

## How can I use the output of this?

```js
import color from 'lens-filter-color';
import ColorInterval from 'lens-filter-color/color-interval';
import { convertImageDataToCanvasURL } from 'lens-core';

const colorIntervalBlue = new ColorInterval({
    from: { r: 0, b: 40, g: 100 },
    to: { r: 80, b: 100, g: 150 },
    match: { r: 0, b: 255, g: 255 },
    noMatch: { r: null, b: null, g: null, a: 150 }
});

color({
    data: IMAGE_DATA, 
    options: { colorsInterval: [colorIntervalBlue] }, 
    nWorkers: 4
}).then(function (result) {
    // result === ImageData object
    const image = document.createElement('img');
    image.setAttribute('src', convertImageDataToCanvasURL(imageData));
    target.appendChild(image);
});
```

---
_Source: https://npm.io/package/lens-filter-color · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._