Image editing

Image editing - HTML5

April 11, 2012

I just did some experiment with very basic image manipulation using HTML5 APIs and JavaScript. In a nut shell, here is what I am trying to do.

Load image in cavas element.
Extract the pixels using context.getImageData method.
Iterate through the pixels and edit/change
Restore it back to cavas using context.putImageData method.

Let's go one more level deep into ctx.getImageData method.

context.getImageData method returns an ImageData object containing a copy of pixel data for the image loaded in canvas context. For example, if you have an image of 10 x 10 size (10px wide and 10px height) loaded in a canvas, you get an array of pixels representing this 10 x 10 size image. There would be a total of 100pixels in this image.

Each pixel is further divided into four units of RGBA (red, green, blue, and alpha) values, and these four values combined will give unique color & alpha property to one pixel. Here in this case, the total units in the ImageData would be 100 x 4 = 400.
So, when you traversing through this ImageData array, every four units consists of one pixel, and after the 40th unit, you get the second row of pixels etc.

Lets explore this through the code.
Here I am trying to create the cavas dynamically and extract the edited image directly from cavas and shows it on the UI.

Load the image in html - <img> tag.
    <div class="it">
        <h3>Source</h3>
        <img src="images/theme.jpg">
    </div>

Script to manipulate the image
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">

    // On window load. This waits until images have loaded which is essential
    $(window).load(function(){

        // clone image
        $('.item img').each(function(){
            var el = $(this);
            this.src = edit(this.src);
        });

    });

    function edit(src){
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var imgObj = new Image();
        imgObj.src = src;
        canvas.width = imgObj.width;
        canvas.height = imgObj.height;
        ctx.drawImage(imgObj, 0, 0);
        var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var w = imgPixels.width;
        var h = imgPixels.height;
        for (var y = 0; y < h; y++){
            for(var x = 0; x < w; x++){
                var i = (y * 4) * w + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg;
                imgPixels.data[i + 1] = avg;
                imgPixels.data[i + 2] = avg;
            }
        }
        ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        return canvas.toDataURL();
    }

</script>

The code highlighted in red are the core to manipulate image data. getImageData gives an array back to imgPixels varaiable. The total length will be width x height x 4. Then we iterate through the pixels, and apply each pixel to its gray scale by calculating the average of R,G,B values. Once we apply this to all pixels, use putImageData to update the image back to cavas, then get the DataUrl to the jQuery method to assign back to the img tag.

Below is the output I get on this demo: