Render range for a color space. Useful in color pickers.
MIT License
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.
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';
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. |
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. |
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.