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(
createCanvas(400,400)).getContext("2d");

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(){
ctx.drawImage(img,0,0,400,300);

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

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

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;
ImDat.setPixel(x,y,{R:grey,G:grey,B:grey,A:c1.A});
}
}

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:

 ctx.putImageData(ImDat,0,0);
}
 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" 
--allow-file-access-from-files

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

 --allow-file-access-from-files 

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.

 

embose

 

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.

 

Banner


Just JavaScript - The Object Expression

As in most programming languages the expression is an important part of JavaScript, but it isn't quite the same. This is where the idea that JavaScript has some weird type conversions arises. But Java [ ... ]



Javascript Jems - Asynchronous Patterns And Closure

If you have ever been kept awake at night worrying about closure then this is for you? You can understand closure, but what is it for? We explain how it can be all so easy and really, really usef [ ... ]


Other Articles

 

<ASIN:0596517742>

<ASIN:1590597273>



Last Updated ( Wednesday, 09 March 2011 )
 
 

   
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.