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.



Getting Started With jQuery - Advanced Ajax jqXHR and Events

The jQuery approach to Ajax is built on the jqXHR object which wraps the XmlHttpRequest object that the browser provides. It isn't often that you need delve this deeply into jQuery Ajax, but when you  [ ... ]

Getting Started With jQuery - Advanced Ajax Transports

One of the interesting things about jQuery's approach to Ajax is that it can be extended in many ways. In the previous chapter we discovered that you can use converters to create your own data types,  [ ... ]

Other Articles




Last Updated ( Wednesday, 09 March 2011 )

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