Raw image data
Change individual pixels in an image by manipulating the raw image data
You can get the raw data of a loaded image with wade.getImageData(). This gives you an HTML5 ImageData object, that contains the width and height of the image, and the actual raw data. For each pixel you get 4 values between 0 and 255, corresponding to the red, green and blue and alpha channels.
You can then change this data and save it as a new image, or an existing one.
It's also possible to do this operation on portions of the source and destination images, if you don't want to change them all.
App = function()
{
this.load = function()
{
wade.loadImage('/snippets/samples/cc_logo.png');
};
this.init = function()
{
// get the raw data from the image
var image = wade.getImageData('/snippets/samples/cc_logo.png');
var data = image.data;
// transform each pixel by averaging the red, green and blue channels
for (var i=0; i < image.width * image.height * 4; i+=4)
{
var l = (data[i] + data[i+1] + data[i+2]) / 3;
data[i] = data[i+1] = data[i+2] = l;
}
// save it as a new image
wade.putImageData('blackAndWhite.png', image);
// create an object using the new image
var sprite = new Sprite('blackAndWhite.png');
var obj = new SceneObject(sprite);
wade.addSceneObject(obj);
};
};
Your code was executed successfully!