Best way to access image pixels in JavaScript for image processing?

Question

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

Is there any other way to get the pixels of an image without using the canvas element?

Answer 1

I don’t think that you can manipulate images in JavaScript with hardware acceleration, so no matter if it is a canvas or other technology, you won’t get too small advantages in JavaScript.

If you want your code to be hardware accelerated, your code must be compiled into something that runs on the GPU and has access to the graphics memory. The Flash and Silverlight approach is a shader language such as AGAL and HLSL. Maybe JavaScript will have something similar in the future.

So my suggestion is to do image processing with:

• Server technology
• Flash and Silverlight with shader language

Answer 2

I don't have much experience with Javascript, but Max Novakovic (@betamax) wrote a beautiful tiny jQuery plugin called $. getImageData strong>, which may be useful.

You can learn more about $. getImageData strong> to disturb blog and plugin

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

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

Answer 3

I'm not sure, but is it possible to write image data as a string and manipulate the string and then translate it back into the image before showing the resulting image?

This does not require drawing on canvas, and loading images as a string instead of an image. However, it would be associated with some complex and possibly difficult to properly manipulate strings to make sure that the image data is translated correctly and to manipulate pixels more efficiently.

This also means that the line is likely to be very long for large images, so it can take up more memory than the canvas, and potentially it may be necessary to split it into several lines. In return, it can be faster than drawing on canvas, especially with multiple lines, if you only need to manipulate part of the image.

I do not experience image manipulation, but theoretically there is no reason that the file data could not be written to a string. This is simply, again, going to make a very long line and have a possible RAM effect because of this, because the line can take up more RAM than the image file itself. But it will be faster loading, since it should not process data as much as drawing on canvas.

Answer 4

The example below uses MarvinJ . A color image with a resolution of 2800x2053 is required, iteration over each pixel, calculation of the gray value and setting it back. Above the canvas is a div for printing processing time. It took 115 ms on my machine, including downloading images.

 var time = new Date().getTime(); var canvas = document.getElementById("canvas"); image = new MarvinImage(); image.load("https://i.imgur.com/iuGXHFj.jpg", imageLoaded); function imageLoaded(){ for(var y=0; y<image.getHeight(); y++){ for(var x=0; x<image.getWidth(); x++){ var r = image.getIntComponent0(x,y); var g = image.getIntComponent1(x,y); var b = image.getIntComponent2(x,y); var gray = Math.floor(r * 0.21 + g * 0.72 + b * 0.07); image.setIntColor(x,y,255,gray,gray,gray); } } image.draw(canvas); $("#time").html("Processing time: "+(new Date().getTime()-time)+"ms"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script> <div id="time"></div> <canvas id="canvas" width="2800" height="2053"></canvas>