Package Exports
- color-ranger
- color-ranger/worker
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (color-ranger) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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.
Demo, ranges list, color picker.
Use
$ npm install --save color-ranger
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);
//for the blue color (blue = 255, red = 0, green = 0)
var what = [0, 0, 255];
//to imageData’s buffer
var where = imageData.data;
//for hue and saturation channels [0,1]
var how = {
space: 'hsl',
channel: [0,1],
min: [0,0],
max: [360,100]
};
//render
imageData.data = colorRanger.renderRect(what, where, how);
//put image data back to canvas
context.putImageData(imageData, 0, 0);
//get a background with the rendered range
document.documentElement.style.background = 'url(' + canvas.toDataURL() + ') 0 0 / cover';API
color-ranger:render(rgb, 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 |
|---|---|---|
rgb |
Array | An array of rgb values, representing a color. E. g. [0, 255, 127]. |
buffer |
Uint8ClampedArray | An imageData.data object to which render a 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' is 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' or 'rect'. |
color-ranger/chess:chess(rgbA, rgbB, buffer)
Render a chess grid, useful for transparency grid image rendering. Grid size is automatically figured out from the imageData size.
| Parameter | Type | Description |
|---|---|---|
| rgbA | Array | An rgb values for the "black cell" color. |
| rgbB | Array | An rgb values for the "white cell" color. |
| buffer | Uint8ClampedArray | An ImageData object to which render the grid bitmap. |
color-ranger/worker:getWorker(spaces)
Return a web-worker able to render any range for the passed set of spaces. spaces should be a color-space module or it’s custom build. Usually you do this:
var spaces = require('color-space');
//set up and run worker
var rangerWorker = require('color-ranger/worker')();
//catch worker response
rangerWorker.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';
});
//send a data to the worker
rangerWorker.postMessage({
rgb: rgbArray,
type: 'polar',
space: 'lab',
channel: [0,1],
max: [360, 100],
min: [0, 100],
data: imageData,
id: 1
});Worker gets all the parameters of .render, besides there are additional option id, an id of request to identify response in response.
