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!