HTML5 Canvas Tutorial: manipulating bitmap images

manipulating bitmap images on the canvas

Introduction

Each pixel in a (bitmap) image possesses internal data (zogenaamd Image Data) on one red, one green, one blue, and alpha (transparency) component, which we can access and manipulate individual per pixel. For this, we can use the getImageData() method of the canvas context. We can use the putImageData() method of the canvas context to change the pixels in the image:

context.drawMyImage(myImage, destX, destY);
var myImageData = context.getImageData(0, 0, canvas.width, canvas.height);
var data = myImageData.data;
// data manipulatie
context.putImageData(myImageData, 0, 0);

To adjust the image Data, we need to go through all the pixels one by one to adjust them individually. The following code defines a function which iterates through all the pixels in two different methods (method 1 and method 2):

  1. Quickly iterate through all the pixels of the image;
  2. Iterating through pixels of the image based on x and y coordinates.

function drawManipulatedImage(){
      var canvas=document.getElementById("imageManipulation"); 
      var context=canvas.getContext("2d"); 
      var myBitmapImage = new Image();
      myBitmapImage.onload = function(){
          var imageWidth = myBitmapImage.width;
          var imageHeight = myBitmapImage.height;
          var X = canvas.width / 2 - imageWidth / 2;
          var Y = canvas.height / 2 - imageHeight / 2;
          context.drawImage(myBitmapImage, X, Y);
          var myImageData = context.getImageData(0, 0, canvas.width, canvas.height);
          var data = myImageData.data;
          
          //Method 1: Quickly iterate through all the pixels of the image;
          for (var i = 0, n = data.length; i < n; i += 4) { 
              var red = data[i]; // red 
              var green = data[i + 1]; // groen 
              var blue = data[i + 2]; // blauw 
              // i+3 heeft betrekking op transparantie (alpha) en is het vierde element  
          } 
         
          //Method 2:  iterating through pixels of the image based on x and y coordinates.
          // iterate through each row
          for (var y = 0; y < imageHeight; y++) { 
          // iterate through each column
          for (var x = 0; x < imageWidth; x++) {
          //Adjusting the image data 
          var red = data[((imageWidth * y) + x) * 4]; 
          var green = data[((imageWidth * y) + x) * 4 + 1]; 
          var blue = data[((imageWidth * y) + x) * 4 + 2]; 
          } 
   	   }
      // Draw the manipulated image
      context.putImageData(myImageData, 0, 0);
      };
  myBitmapImage.src = "images/donkey2.jpg";
  };

Inversion of colors in a bitmap image.

See image 1.In this example, we'll invert the colors of an image by inverting the color of each pixel.
<!doctype html>
  <html>
  <head>
  <title>Manipulated images on canvas</title>
  <script> 
  function drawManipulatedImage(){
  var canvas=document.getElementById("imageManipulation"); 
  var context=canvas.getContext("2d"); 
  var myBitmapImage = new Image();
  myBitmapImage.onload = function(){
      var imageWidth = myBitmapImage.width;
      var imageHeight = myBitmapImage.height;
      var X = canvas.width / 2 - imageWidth / 2;
      var Y = canvas.height / 2 - imageHeight / 2;
      
      context.drawImage(myBitmapImage, X, Y);
      var myImageData = context.getImageData(0, 0, canvas.width, canvas.height);
      var data = myImageData.data;
     
      //Take inverse of the image colors
      for (var i = 0, n = data.length; i < n; i += 4) {
          data[i] = 255 - data[i]; // red
          data[i + 1] = 255 - data[i + 1]; // green
          data[i + 2] = 255 - data[i + 2]; // blue
          // i+3 (alpha) does not need to be changed here
      }
      // Draw the manipulated image
      context.putImageData(myImageData, 0, 0);
      };
      myBitmapImage.src = "images/donkey2.jpg";
  };
  window.addEventListener("load", drawManipulatedImage, true);
  </script>
  </head>
  <body> 
  <canvas id="imageManipulation" style="border: 1px solid;" width="400" height="500"></canvas>
  </body>
  </html>
Manipuleren afbeelding op het canvas
Image 1. Nuke 'm all them donkeys!!

Check this example in your browser

Color conversion to grayscale bitmap image.

See also image 2.

To convert colors in a bitmap image on an HTML5 Canvas to grayscale, we must again interate through all the pixels of the image, then calculate the brightness value of each pixel and finally apply these brightness values to the red, green and blue components.

<!doctype html>
  <html>
  <head>
  <title>Manipulated images on canvas</title>
  <script> 
  function drawManipulatedImage(){
  var canvas=document.getElementById("imageManipulation"); 
  var context=canvas.getContext("2d"); 
  var myBitmapImage = new Image();
  myBitmapImage.onload = function(){
      var imageWidth = myBitmapImage.width;
      var imageHeight = myBitmapImage.height;
      var X = canvas.width / 2 - imageWidth / 2;
      var Y = canvas.height / 2 - imageHeight / 2;
      
      context.drawImage(myBitmapImage, X, Y);
      var myImageData = context.getImageData(0, 0, canvas.width, canvas.height);
      var data = myImageData.data;
     
      //Turn the colors in the image into gray shades 
     	for (var i = 0; i < data.length; i += 4) {
                var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
                data[i] = brightness; // rood
                data[i + 1] = brightness; // groen
                data[i + 2] = brightness; // blauw
          		// i+3 (alpha) does not need to be changed here
      }
      // Draw the manipulated image
      context.putImageData(myImageData, 0, 0);
      };
      myBitmapImage.src = "images/donkey2.jpg";
  };
  window.addEventListener("load", drawManipulatedImage, true);
  </script>
  </head>
  <body> 
  <canvas id="imageManipulation" style="border: 1px solid;" width="400" height="500"></canvas>
  </body>
  </html>
Manipuleren afbeelding op het canvas
Image 2. Colors are converted to grayscale

Check this example in your browser

Next tutorial

Leave a comment