Javascript Image Manipulation using HTML5 canvas element [Tutorial]

I have been working with HTML5 and Javascript for my Google summer of code project for the Fluid Project. This post is the first of a series of tutorials which I would be posting related to Javascript, HTML5 (especially canvas element) and Fluid Infusion.

I have been exploring ways to get image pixels from an image object using Javascript. As far as I know, the only way of doing this so far is by using the HTML5 canvas element. So, you can either build a canvas element yourself and get the pixels or use some nice Image Processing library such as Pixastic. I would now be describing more about image processing using canvas element. I assume that you know a bit about the HTML5 canvas element beforehand. For knowing more about canvas, I recommend going through these tutorials by Mozilla. I also assume that you have got an Image object for which you want to manipulate pixels.

Top obtain the pixels for a given image, you first have to draw that image on canvas and then get the pixels using the getImageData method on canvas context.

var imageManipulationCanvas = document.createElement('canvas');
imageManipulationCanvas.height = image.height;
imageManipulationCanvas.width = image.width;
var imageManipulationCtx = imageManipulationCanvas.getContext('2d');
imageManipulationCtx.drawImage(image, 0, 0); // Draw image on temporary canvas
var myImageData = imageManipulationCtx.getImageData(0, 0, image.width, image.height); // Parameters are left, top, width and height

The image data object has three fields: width, height and data where data is the CanvasPixelArray object which contains pixel data for image.

The CanvasPixelArray object can be accessed to look at the raw pixel data; each pixel is represented by four one-byte values (red, green, blue, and alpha, in that order; that is, “RGBA” format). Each color component is represented by an integer between 0 and 255. Each component is assigned a consecutive index within the array, with the top left pixel’s red component being at index 0 within the array. Pixels then proceed from left to right, then downward, throughout the array.

The CanvasPixelArray contains height x width x 4 bytes of data, with index values ranging from 0 to (height x width x 4)-1.

Now you can manipulate the pixels as you want for any image. However for simple operations like resizing and cropping, I prefer using different variations of the drawImage function rather than manipulating the pixels myself. Here’s how to resize an image using drawImage:

var imageManipulationCanvas = document.createElement('canvas');
imageManipulationCanvas.width = newW;
imageManipulationCanvas.height = newH;

var imageManipulationCtx = imageManipulationCanvas.getContext('2d');
imageManipulationCtx.drawImage(that.image, 0, 0, resizeW, resizeH); // Draw resized image on temporary canvas
var resizedImageDataURL = imageManipulationCanvas.toDataURL(); //get DataURL for cropped image
return resizedImageDataURL; //DataURL can be directly used to make new image pbject by using image.src

And, the following for cropping an image:

var imageManipulationCanvas = document.createElement('canvas');
imageManipulationCanvas.height = newH;
imageManipulationCanvas.width = newW;
var imageManipulationCtx = imageManipulationCanvas.getContext('2d');

//use drawImage(Object image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh)
imageManipulationCtx.drawImage(image, croppingDimensionX, croppingDimensionY, croppingDimensionW, croppingDimensionH, 0, 0, croppingDimensionW, croppingDimensionH); // Draw cropped image on temporary canvas
var croppedImageDataURL = imageManipulationCanvas.toDataURL(); //get DataURL for cropped image
return croppedImageDataURL;