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?
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.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>
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:
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 complex 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.
