Question

I’m new to image manipulation with HTML5. I need some help to change the RGB values of an image to create different effects. Around the web I didn’t find any straight forward tutorial about it. I’ve put together a bit of code to start with taken here and there on the web:

 window.onload = function(){
     var imageObj = new Image();
     imageObj.onload = function(){
         drawImage(this);
     };
     imageObj.src = "images/test.jpg";
 };

 function drawImage(imageObj){
      var canvas = document.getElementById("mau");
      var context = canvas.getContext("2d");

      var destX = 1;
      var destY = 1;

      context.drawImage(imageObj, destX, destY);

      var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
      var data = imageData.data;

      for (var i = 0; i < data.length; i += 4) {
          var red = data[i]; // red
          var green = data[i + 1]; // green
          var blue = data[i + 2]; // blue
          // i+3 is alpha (the fourth element)
      }

      // overwrite original image
      context.putImageData(imageData, 0, 0);
 }

At this stage the image is shown with no variation. How do I change the 3 variables R, G, B in order to enhance the blue channel for instance? And can someone please run me through the code to understand it better?

Thanks in advance
Mauro

Answer 1

Here’s a quick example. It swaps the red, green and blue components around:

  for (var i = 0; i < data.length; i += 4) {
      var red = data[i]; // red
      var green = data[i + 1]; // green
      var blue = data[i + 2]; // blue
      // i+3 is alpha (the fourth element)
      data[i] = green;
      data[i + 1] = blue;
      data[i + 2] = red;
  }

The original image is from Wikipedia: