Cabbage.js (from canvas + image, getit, gettit, no??) is a lightweight library for manipulating an HTML5 canvas.
HTML5 canvas stores image data as a 1-dimensional array with a pixel being four consecutive array elements (r, g, b and a)
With cabbage, simply pass the canvas element and refer to the pixel using x and y coordinates. You don't have to keep track of which pixel and value type you are on.
You can initialize cabbage by passing in the #id of a <canvas> element
/*
* <html><body><canvas id="canvas"></canvas></body></html>
*/
var cabbage = new Cabbage('canvas');Alternatively, you can just pass in a string that is not used as an id by any other element. cabbage will create a <canvas> element for you and assign that as its #id.
/*
* Before:
* <html><body>emptiness</body></html>
*/
var cabbage = new Cabbage('canvas');
/*
* After:
* <html><body><canvas id="canvas"></canvas>emptiness</body></html>
*/You can also pass in a specific width and height
var width = 600;
var height = 400;
var cabbage = new Cabbage('canvas', width, height);Once you have an instance, you can now call loadImg
cabbage.loadImg('foo.jpg');You can pass in an x and/or y where your images top-left corner should be drawn. By default it will be 0, 0.
var x = 0, y = 5;
cabbage.loadImg('foo.jpg', x, y);With cabbage, you get the following canvas.context methods already defined:
-
drawImage -
putImageData
And some other extras:
resetImageData
The difference is that they store image data behind the scenes for easy access later.
cabbage also defines the following:
For iterating through the canvas element:
-
map -
convolve
For manipulating at a pixel level:
-
getPixel -
setPixel
For checking pixels:
-
isBorder -
isOutOfBounds
TODO:
-
Make validations separate from conversion methods
Conversion happens on
mapandconvolveon each iteration. The validation makes running through it extremely slow. Instead of doing it by default, call map and convolve then let user decide whether or not validation should happen. -
Matrix convolution options similar to gimp
ABOUT
If cabbage looks like it has a very specific use case right now, that's probably cause it is. I decided to make this after doing a bunch of image manipulation implementations (search my repos for edge detection, bitmap-SVG conversion and image thresholding) and always ending up with a bunch of spaghetti. But really, what I want is cabbage, where I can run through the ImageData to do my calculations and not have to remember to+=4 or maybe +=3 or was it 2? I dunno. I also just wanted lightweight and didn't care about drawing lines or shapes. Maybe in the future? But not right now. Anyways, if you see something that should be part of cabbage, please send in a PR or your cabbage ideas. With that, I leave you this ever wonderful gif (it had to be done of course).
