Image manipulation

Create Image Data

The createImageData() is a method that creates a new ImageData object that is blank. This new object, by default, has pixel values equal with transparent black. 

For each pixel in this new object, there are four pieces of information, the RGBA values.

We will create blank image data for 3 new canvas elements:

<canvas id="myCanvas2" height="272" width="400"></canvas>
<canvas id="myCanvas3" height="272" width="400"></canvas>
<canvas id="myCanvas4" height="272" width="400"></canvas>

We'll grab the canvas elements and the graphics contexts here:

var canvas2 = document.getElementById("myCanvas2"); 
var context2 = canvas2.getContext('2d'); 
var canvas3 = document.getElementById("myCanvas3"); 
var context3 = canvas3.getContext('2d'); 
var canvas4 = document.getElementById("myCanvas4"); 
var context4 = canvas4.getContext('2d');

var imgData2 = context2.createImageData(canvas2.width, canvas2.height);
var imgData3 = context3.createImageData(canvas3.width, canvas3.height);
var imgData4 = context4.createImageData(canvas4.width, canvas4.height);

Inverse color

Now we will iterate over the bitmap array pix and we will inverse the color of prototype.png. After this, we will put the new image data into the canvas2:

This JavaScript code for the above is:

/* Loop over each pixel and invert the color.*/
for (var i = 0, n = pix.length; i < n; i += 4) {
imgData2.data[i ] = 255 - pix[i ]; /* red */
imgData2.data[i+1] = 255 - pix[i+1]; /* green */
imgData2.data[i+2] = 255 - pix[i+2]; /* blue */
imgData2.data[i+3] = pix[i+3]; /* alpha */
}
console.log(imgData2);
/* now draw the new image data on the second canvas */
context2.putImageData(imgData2, 0, 0);

this will create the following 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.

Make blue

Here we will iterate over the bitmap array pix and we will change the color of prototype.pngto 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.

Make transparent

Here our goal is to create a transparent image.

We will iterate over the bitmap array pix and we will change the color of prototype.pngto transparent. After this, we will put the new image data into the canvas4

The JavaScript code for this is:

/* make transparent*/
for (var i = 0, n = pix.length; i < n; i ++) {
  imgData4.data[i ] = pix[i ];
  if (i % 4 == 3 ) {
    imgData4.data [i] = pix[i]/3
  }
}
console.log(imgData4);
context4.putImageData(imgData4, 0, 0);

The above 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.

Exercise

Exercise

1. Open your editor, create a new file and save it as exersice15.3.html in the folder "yourNameWEB2JS". Copy this code and paste it into the file. Save the file.
2. Create a new file and save it as 15.3.js in the folder "js/ exercises". Copy this code and paste it into the file. Save the file. You may need to create the js folder (if it's not already there)
3. Open the html file in your Firefox. Is everything ok?