Canvas bitmap operations - bitblt in JavaScript
Canvas bitmap operations - bitblt in JavaScript
Article Index
Canvas bitmap operations - bitblt in JavaScript
ImageData object
Special effects and security

A special effects filter

As an example of loading and modifying an existing image let's implement a simple "embossed" effect filter.

First we create a canvas object using the helper function introduced in the previous examples:

function draw(){
var ctx =document.body.appendChild(

Next we load the image file to be processed:

var img=new Image();

and write the onload event handler which draws the image to the canvas:

img.onload = function(){

Getting the ImageData is just a repeat of what we did in the previous example:

 var ImDat=ctx.getImageData(0,0,400,300);

At this point we can now process the image data using the augmented methods:

for(var x=0;x<400;x++){
for (var y = 0; y < 300; y++) {
var c1=ImDat.getPixel(x,y);
var c2=ImDat.getPixel(x,y+3);
var r=Math.abs(c1.R-c2.R)+128;
var g=Math.abs(c1.G-c2.G)+128;
var b=Math.abs(c1.B-c2.B)+128;
var grey=(r+g+b)/3;

The two for loops simply scan through every pixel in the image and computes the difference between the pixel's color value and the color value of the pixel three to the right. The 128 is added to make the difference have an average of 128 rather than 0 and then the color values are converted to a grey level i.e. the average of the three color values. Finally the new pixel data is stored back in the ImageData object without changing the A value.

When the for loops come to an end all that remains is to put the pixel data back in the canvas or into a different canvas if you want to display both the input and the result:

 img.src = "test.jpg";

A security problem

If you try this program out you will find that it doesn't work. The reason is that we are loading an image from the local file system and this is a security risk. You cannot access the pixels of an image that has been loaded from a different URL and accessing pixels of a local file is particularly forbidden. If you download the file from a server with the same URL as the script then there's no problem.

To allow for testing, Chrome has a command line switch that turns off the security check - no doubt other browsers have similar features. All you have to do is locate the short cut that you use to launch Chrome and change the target to read:

"C:\Program Files\Google\Chrome\Application\chrome.exe" 

Alternatively simply use the command from the command prompt or add:


to whatever command gets Chrome.

With this command line switch it all works and you can see the result of the effect. It is also worth saying that it runs remarkably fast for a JavaScript-based image processing routine.




If you would like the code for this project then register and click on CodeBin.

If you would like to be informed about new articles on I Programmer you can either follow us on Twitter, on Facebook , on Digg or you can subscribe to our weekly newsletter.



Just JavaScript - The Function Object

The function object is the most important object in all of JavaScript and yet we tend to forget that it is an object. Understanding that JavaScript functions are objects is probably the most important [ ... ]

Just JavaScript - Functions Scope, Lifetime and Closure

When you first meet it closure seems like the craziest of ideas. However once you realize that JavaScript functions are objects and what this implies then it seems like a natural consequence.

Other Articles




Last Updated ( Wednesday, 09 March 2011 )

Copyright © 2018 All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.