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>
<head>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
...
</canvas>
</body>
</html>
<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>
<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>
(y) great….!!!!!
It’s a good start 🙂 Go ahead