Wondering what’s next for npm?Check out our public roadmap! »

    image-filter-color

    1.0.0 • Public • Published

    build status npm version codecov

    image-filter-color

    Small library to apply a color transformation to a image relying on image-filter-core handle the transformation and distribute work with webworkers. This transformation picks on a color interval and replaces it with a provided color.

    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:

    Other related modules:

    Install

    npm install image-filter-color --save
    

    Usage

    It applies a color 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 imageColor = require('image-color');
    var 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 }
    });
     
    var 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 }
    });
     
    var options = {
        colorsInterval: [colorIntervalBlue, colorIntervalPink]
    };
     
    var nWorkers = 4;
     
    imageColor(IMAGE_DATA, options, nWorkers);

    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 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 }
    });
     
    var 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 }
    });
     
    var options = {
        colorsInterval: [colorIntervalBlue, colorIntervalPink]
    };
     
    var nWorkers = 4;
     
    imageColor(IMAGE_DATA, options, nWorkers)
        .then(function (result) {
            // result === ImageData object
            var image = document.createElement('img');
            image.setAttribute('src', imageFilterCore.convertImageDataToCanvasURL(imageData));
            target.appendChild(image);
        });

    Install

    npm i image-filter-color

    DownloadsWeekly Downloads

    20

    Version

    1.0.0

    License

    ISC

    Last publish

    Collaborators

    • avatar