lens-filter-grayscale

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

Check out lens monorepo for other related modules

Install

npm install lens-filter-grayscale --save

Usage

It applies a grayscale transformation to a base64 image. If you want a more complete library, please check 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:

import grayscale from 'lens-filter-grayscale';

grayscale({
    data: IMAGE_DATA,
    nWorkers: 4
});

Frequent questions:

How can I get image data from a image tag?

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?

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?

import grayscale from 'lens-filter-grayscale';
import { convertImageDataToCanvasURL } from 'lens-core';

grayscale({
    data: IMAGE_DATA, 
    nWorkers: 4
}).then(function (result) {
    // result === ImageData object
    const image = document.createElement('img');
    image.setAttribute('src', convertImageDataToCanvasURL(imageData));
    target.appendChild(image);
});