Simple browser-based pixel manipulation
var imageData = context.getImageData(0, 0, width, height)
var pixels = Pixels(imageData)
pixels.replace('magenta', 'transparent')
imageData = pixels.compile()
context.putImageData(imageData, 0, 0)// Create from `ImageData` to retain pixel information...
var pixels = Pixels(imageData)
// ...or from dimensions to create a blank slate.
var pixels = Pixels(width, height)Creates and returns a new Pixels object from the specified ImageData object. Alternatively, you can create a new Pixels instance from a desired width and height.
var color = pixels.get(x, y) // -> pixelsGets the pixel color at (x, y) in the format 'rgba(red, green, blue, alpha)'.
pixels.set(color)(x, y) // -> pixels.setSets the pixel color at (x, y) to color. Usage is identical to Grid.set, except with colors instead of integers.
color can be any valid HTML color, including the following:
- Color names:
'blue','dimgray','transparent'... - Hex colors:
'#dc143c','#DAB'... - RGB and RGBA values:
'rgb(204, 51, 51)','rgba(64, 120, 193, 0.5)'.
pixels.each(callback) // -> pixelsExecutes callback on each pixel in the pixel data.
pixels.each((color, x, y) => x < pixels.width && pixels.set('gray')(x, y))pixels.replace(oldColor, newColor) // -> pixelsReplaces all appearances of oldColor in the pixel data with newColor.
This operation turns out to be really speedy since the colors are indexed in pixels.colors instead of interspersed throughout the ImageData object.
var imageData = pixels.compile() // -> ImageDataAlters pixels.data based on the changes made to pixels.grid since instantiation. This is what actually converts indices back into pixel colors for you.
After receiving the ImageData object, paste it back on the context it came from to view the changes.
context.putImageData(imageData, 0, 0) // Magic!The width of the current image.
The height of the current image.
An Array of the known and indexed colors for the current image.
A Grid object in which each item in grid.data corresponds to a color index.
The ImageData object that was passed into the factory (or created based on width and height).
MIT