Nutella Peanut-Butter Marshmallow
    Wondering what’s next for npm?Check out our public roadmap! »

    color-ranger

    5.0.0 • Public • Published

    C O L O R − R A N G E R  renders a color range for a color in rectangular or polar coordinate system by manipulating ImageData’s buffer. It is primarily needed for building color pickers.

    Test & demo, color picker.

    alt alt alt unstable

    Use

    NPM

    var colorRanger = require('color-ranger');
     
    //create a canvas
    var canvas = document.createElement('canvas');
    canvas.width = 50;
    canvas.height = 50;
    var context = canvas.getContext('2d');
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
     
    //render
    imageData.data = colorRanger.render([0, 255, 255], imageData.data, {
        type: 'polar',
        space: 'hsl',
        channel: [0, 1]
    });
     
    //put image data back to canvas
    context.putImageData(imageData, 0, 0);
    document.documentElement.style.background = 'url(' + canvas.toDataURL() + ') 0 0 / cover';

    API

    ranger.render(color, buffer, options)

    Render rectangular or polar range into an imageData’s buffer. Size of the final image is taken such that it fills the whole imageData area.

    Parameter Type Description
    color Array An array of input values, defined in sourceSpace - rgb by default.
    buffer Uint8ClampedArray An imageData.data object to which render the range.
    options.space string A color space name for the range taken from the color-space module. E. g. 'hsl'.
    options.channel Array An array of x/y space channel indexes. E. g. [0,2] from 'hsv' are hue and value channels. One of the channels can be omitted, e. g. [null, 1] means render saturation by y-axis.
    options.min, options.max Array Arrays of left and right values for the range, corresponding to the channels in x/y axis.
    options.type String Render whether polar, rect or chess.
    options.sourceSpace String If you have color in a space different from rgb, pass the sourceSpace.

    ranger.chess(colorA, colorB, buffer)

    Render a chess grid, useful for transparency grid image rendering. Grid size is automatically figured out from the imageData size.

    Parameter Type Description
    colorA Array Black cell color.
    colorB Array White cell color.
    buffer Uint8ClampedArray An ImageData object into which to render grid.

    require('color-ranger/worker')

    Return worker for workerify, able to render range in a background.

    var work = require('webworkify');
    var worker = work(require('color-ranger/worker'));
     
    worker.addEvenListener('message', function(evt){
        if (evt.data.id !== 1) return;
     
        //image data buffer is returned as `event.data.data`
        imageData.data = evt.data.data;
        context.putImageData(imageData, 0, 0);
     
        document.body.style.background = 'url(' + canvas.toDataURL() + ') 0 0 / cover';
    });
     
    worker.postMessage({
        color: [255, 255, 255],
        type: 'polar',
        space: 'lab',
        sourceSpace: 'rgb'
        channel: [0,1],
        max: [360, 100],
        min: [0, 100],
        data: imageData,
        id: 1
    });

    Worker gets all the parameters of .render, with additional option id, an id of request to identify in response.

    Install

    npm i color-ranger

    DownloadsWeekly Downloads

    3

    Version

    5.0.0

    License

    MIT

    Last publish

    Collaborators

    • avatar