Image manipulation
Make blue
Here we will iterate over the bitmap array pix
and we will change the color of prototype.png
to blue. Then, we will put the new image data into the canvas3
The JavaScript code for the above is:
for (var i = 0, n = pix.length; i < n; i ++) {
imgData3.data[i ] = pix[i ];
if (i % 4 == 0 ) {
imgData3.data[i ] = 0;
}
else if (i % 4 == 1) {
imgData3.data[i ] = 0;
}
}
context3.putImageData(imgData3, 0, 0);
this will create the image:
Important Note: To do this exercise using your local file system, you will need to use Firefox as your browser. Chrome will display an error due to security constraints.