Best way to access pixels of an image in JavaScript to do Image Processing?

Question

I am trying to perform simple operations on image using javascript. To get the pixels of the image, I am drawing the image on canvas and then get the ImageData from canvas. But for large images, drawing them on the canvas takes a lot of time.

Is there any other way of getting the image pixels without using the canvas element?

Answer 1

I don't think you can have image manipulation in JavaScript with hardware acceleration, so no matter if it's canvas or other technology you won't gain much marginal benefit within JavaScript environment.

If you want your code to be hardware accelerated, your code must be compiled into something that is ran in a GPU and has access to graphics memory. Flash and Silverlight's approach is introducing shading language like AGAL and HLSL. Maybe JavaScript will have something like this in the future.

So my suggestion is to do image processing with:

1. Server side technology
2. Flash and Silverlight with shading language

Answer 2

I don't have much experience with Javascript but Max Novakovic(@betamax) wrote a nice a tiny jQuery plugin called $.getImageData which might be helpful.

You can read more about $.getImageData on the disturb blog and the plugin page

You should be able to access pixels through something like context.getImageData(x, y, width, height).data.

Also, you mentioned hardware acceleration, and that should be available in Firefox4 and Chrome. Shadertoy uses GLSL shaders in the browser: