Introduction to Image Processing using HTML5

Image processing is one of those areas I find a lot of interest. Editing, making enhancements to photos and merging multiple images into a single image can be one of the most creative past times for designers. However developers too could play around with pixels as designers do, and this in fact is known as image processing. It deals with manipulating pixels in an image using code.

Image processing branches out into many research areas such as medical, astronomy, chemistry. Mostly enhancing images for better clarity, extracting out hidden details in an image, enhancing segments of an image are typical uses of Image processing.

This post deals with using HTML5 in the context of image processing. With the improvement of modern browsers now it is possible to perform complex image processing algorithms simply with the context of a web browser.
When it comes to Image processing grayscale images are used to reduce the complexity of processing 3 separate R,G,B channels. Since gray images preserve the same luminosity of the color images, gray image processing algorithms can easily be ported to color images.

Basics of HTML5 image manipulation


New markup was introduced with HTML5, and out of it the Canvas element helps in rendering images and accessing pixel data from images.

The basic syntax for creating a canvas is as follows

HTML
<html>
   <head>
   </head>
   <body>
     <canvas id="myCanvas" width="500" height="500">
         ...
     </canvas>
   </body>
</html>
Javascript
<script type="text/javascript">
    // Obtaining the canvas reference
    var theCanvas = document.getElementById("myCanvas");
    // Getting a reference 2D
    var context = theCanvas.getContext('2d');
</script>

The following functions can be used to work with the canvas to draw/fetch images from the canvas.

  • Drawing an image on the canvas (drawImage(imageRef, drawStartX, drawStartY, width, height))
  •     <script type="text/javascript">
          // Drawing an image using the 2D context of canvas. 
          context.drawImage(imageObj, 0, 0, width, height); 
        </script>
      
  • Accessing pixel data in the canvas (getImageData(0,0,500,500))
  •     <script type="text/javascript">
    
          // Getting the current image data in the canvas.
          var imageData=context.getImageData(0,0,500,500);
    
          // Iterating imageData and obtaining pixel.
          for (var i=0;i<imageData.data.length;i+=4)
          {
              var red = imageData.data[i];
              var green = imageData.data[i+1];
              var blue = imageData.data[i+2];
              var alpha = imageData.data[i+3];           
          }
        </script>
      
Advertisements

2 thoughts on “Introduction to Image Processing using HTML5

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: