[DEPRECATED] Fast per-pixel manipualtion for Canvas or WebGL
A note on performance. A wrapper/library like this will hamper the performance when you are doing millions of operations; to the point that it may even be worse than simple (unrolled) Uint8ClampedArray loop. Just because this library performs better in certain microbenchmarks doesn't mean much... Always benchmark your own app!
#about
Fast per-pixel image manipulation with Canvas / WebGL.
Instead of manipulating the 8 bit array (separate R, G, B, A components), we modify a Int32Array which is backed by the ImageData's Uint8ClampedArray buffer. If unsupported, we fall back to 8bit modification. The concept is discussed here: https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/
The code looks like this:
//create an empty ImageData
var imageData = ctx.createImageData(0, 0, width, height);
//make a new ImageBuffer for direct manipulation of that ImageData
var buffer = new ImageBuffer(imageData);
//do your per-piel operations with setPixel and getPixel
//or act directly on buffer.uint8
for (var i=0; i < width * height; i++) {
var r = 0,
g = ( i/(width*height) ) * 255, //simple linear gradient
b = 0,
a = 0;
// set the pixel, using original alpha
buffer.setPixel(i, r, g, b, a);
}
//place the data onto the canvas
ctx.putImageData(imageData, 0, 0);
The setPixel
and getPixel
methods will handle endianness for you, when using the more performant 32-bit approach. ImageBuffer also includes a few other useful functions, like creating a new Image object from an ImageData source.
Install:
npm install imagebuffer
Require it in your client-side code:
var ImageBuffer = require('imagebuffer');
You can grab the minified UMD version inside the build
folder.
You need to wrap the Uint8ClampedArray
as a Uint8Array
, like so:
var type = gl.UNSIGNED_BYTE;
var data = new Uint8Array(buffer.uint8);
To browserify, minify, and generate docs, run:
npm run-script build