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.

Use

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.