image-filter-contrast

Small library to apply a contrast transformation to a image relying on image-filter-core handle the transformation and distribute work with webworkers.

If you run npm run build && npm run serve and open http://localhost:8080, you'll find out the code for the following example:

Original:

Expected Result (contrast: 70):

Other related modules:

• image-filter-core
• image-filter-contrast
• image-filter-grayscale
• image-filter-threshold
• image-filter-sepia
• image-filter-invert
• image-filter-gamma
• image-filter-colorize
• image-filters

Install

npm install image-filter-contrast --save

Usage

It applies a contrast transformation to a base64 image. If you want a more complete library, please check image-filters 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 image-filter-core to convert from ImageData to dataURL.

JS file:

var imageContrast = require('image-filters-contrast');
var nWorkers = 4;

imageContrast(IMAGE_DATA, { contrast: 30 }, nWorkers)
    .then(function (result) {
        // result === ImageData object
    });

Frequent questions:

How can I get image data from a image tag?

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

How can I get image data from url?

var element = document.createElement('img');
element.setAttribute('src', options.url);
//...repeat process from the previous answer

How can I use the output of this?

var imageFilterCore = require('image-filter-core');
var nWorkers = 4;

imageContrast(IMAGE_DATA, { contrast: 30 }, nWorkers)
    .then(function (result) {
        // result === ImageData object
        var image = document.createElement('img');
        image.setAttribute('src', imageFilterCore.convertImageDataToCanvasURL(imageData));
        target.appendChild(image);
    });