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

admin管理员组

文章数量:1345407

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?

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?

• javascript
• image
• html
• image-processing
• canvas

Share Improve this question Follow edited Jun 13, 2015 at 15:20 jopasserat 5,96044 gold badges3333 silver badges5050 bronze badges asked Jun 13, 2011 at 12:19 Pulkit GoyalPulkit Goyal 5,68411 gold badge3434 silver badges5050 bronze badges 8

• 2 Is it really that slow? Maybe it's faster if you don't draw the image to the screen, but to the canvas only. – Harmen Commented Jun 13, 2011 at 12:22
• I am drawing it to the canvas and not the screen. But its still lot slower than most of the image editing tools. – Pulkit Goyal Commented Jun 13, 2011 at 13:01
• 1 Most image editing tools are hardware accelerated; not all browsers support hardware acceleration for canvas yet. But what browser are you testing with? – Harmen Commented Jun 13, 2011 at 15:11
• Would $.getImageData help ? – George Profenza Commented Jun 13, 2011 at 16:20
• @Harmen, I am testing with Firefox and Chrome. – Pulkit Goyal Commented Jun 13, 2011 at 21:36

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 2

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 piled 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

The example below uses MarvinJ. It takes a colored image having 2800x2053 resolution, iterate through each pixel calculating the gray value and setting it back. Above the canvas there is a div to print the processing time. On my machine, it took 115ms including image loading.

var time = new Date().getTime();

var canvas = document.getElementById("canvas");
image = new MarvinImage();
image.load("https://i.imgur./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.marvinj/releases/marvinj-0.7.js"></script>
<div id="time"></div>
<canvas id="canvas" width="2800" height="2053"></canvas>

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:

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

This wouldn't require drawing to canvas, only loading the image data as a string instead of an image. It would, however, involve some plex and possibly difficult to get right string manipulation, to make sure the image data translated correctly and moreso to manipulate the pixels.

It would also mean the string is likely to be very long for larger images, so this might take more memory than canvas would and could potentially need to be split into multiple strings. In exchange it may be faster than drawing to canvas, especially with multiple strings if you only need to manipulate part of the image.

I'm not experienced with image manipulation but theoretically there's no reason a file's data couldn't be written into a string. It is just, again, going to make a very long string and have a possible RAM impact because of it because the string could take up more RAM than the image file itself. But it will be faster loading since it doesn't have to process the data as much as it would to draw to canvas.

本文标签： Best way to access pixels of an image in JavaScript to do Image ProcessingStack Overflow