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 - Parameters, and Destructuring

There are many ways in which JavaScript's approach is different from standard, run of the mill, class-based languages, but some of them go unnoticed. Take the whole subject of parameter passing - Java [ ... ]

Chaining - Fluent Interfaces In JavaScript

One of jQuery's attractive features is the way that you can build up chains of commands that look almost like the way you would use a language. This is more generally called a "Fluent Interface" and i [ ... ]

Other Articles




Last Updated ( Wednesday, 09 March 2011 )

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