JavaScript read image pixel data

Genghiz Cohen

I'm wondering if there is an easy way to read the RGB info from an image in JavaScript. This is for a web app but the image is hosted on the server.

The image I have in mind is quite large and I wrote a C# app to write the info out to a txt file. Turns out that Windows thinks it's crashed/frozen once the text file reaches about 100MB

I've had a look around and nothing seems to work for me.

Giblet

You can use a canvas in HTML5 and access it via JavaScript.
With a canvas id="canvas"

var img = new Image();
img.src = "image.png";
var ctx = document.getElementById("canvas").getContext("2d");
ctx.drawImage(img, 0, 0);
var pixelX = 1;
var pixelY = 1;
var data = ctx.getImageData(0, 0, pixelX, pixelY).data;

amen

How big is the original image file?

Are you reading every pixel location in C# to determine the rgb value and you are then writing the rgb value to a text file?

I'm curious as to what you trying to do ? Maybe there is a different way to do this.

Genghiz Cohen

Starting at 100x96
Working up to flippin enormous!

I'm generating a terrain in WebGL from a height map.

Saved a copy last night. Downloadable here.
User Firefox, Chrome and IE don't like it.

Genghiz Cohen

Giblet wrote: »

You can use a canvas in HTML5 and access it via JavaScript.
With a canvas id="canvas"

var img = new Image();
img.src = "image.png";
var ctx = document.getElementById("canvas").getContext("2d");
ctx.drawImage(img, 0, 0);
var pixelX = 1;
var pixelY = 1;
var data = ctx.getImageData(0, 0, pixelX, pixelY).data;

Just implementing this now. Seems to be almost exactly what I want.
Thanks!

Procasinator

Genghiz Cohen wrote: »

Just implementing this now. Seems to be almost exactly what I want.
Thanks!

I threw something similar into your code last night to see if it worked (I was bored at the time:P). It worked for the small image.

It was much too slow for the big one, however. I'm sure you could do optimisations, but I can't help feel the big image will be hitting the limitations of JS and Canvas.

Genghiz Cohen

Procasinator wrote: »

I threw something similar into your code last night to see if it worked (I was bored at the time:P). It worked for the small image.

It was much too slow for the big one, however. I'm sure you could do optimisations, but I can't help feel the big image will be hitting the limitations of JS and Canvas.

I tested against a full size grey scale image and it took about 10 seconds to read all the pixel data into an array.

var data = ctx.getImageData(0, 0, img.width, img.height).data;

Anyone know if you could get that to just read only the Red data or will I just user a for loop?

Procasinator

Genghiz Cohen wrote: »

Anyone know if you could get that to just read only the Red data or will I just user a for loop?

I don't think there is a call to only pull back the red bytes, so just looping by i + 4 really.

If only red is significant, would you be better off packing 4 heights in each pixel in the actual image?

Genghiz Cohen

Procasinator wrote: »

I don't think there is a call to only pull back the red bytes, so just looping by i + 4 really.

If only red is significant, would you be better off packing 4 heights in each pixel in the actual image?

Do you mean instead of having
[pixel1Info, useless, useless, useless]
[pixel2Info, useless, useless, useless]
Etc.
have
[pixel1Info, pixel2Info, pixel3Info, pixel4Info]
[pixel5Info, pixel6Info, pixel7Info, pixel8Info]

If so that wouldn't lend itself to being as easily editable or viewable as the standard way.

I can crack open my current height maps in Paint and know how the terrain should look, then make some small changes if necessary.

It would make them much smaller, so maybe make a custom filetype for production release.

The more I think about it the more that idea seems to be the way to go... I'm making a web app, so bandwidth is key here...

Genghiz Cohen

Hah, HTML5, you are a bastard!

Creating my canvas in JS like this:

    img.onload = function() {
    var newCanvas = document.createElement('canvas');
    var ctx = newCanvas.getContext("2d");

And only half my map was getting a height, very strange. So then, eventually, I draw the canvas to the screen and lo and behold the canvas is the wrong size!

Lesson: Be specific about everything!

var newCanvas = document.createElement('canvas');
newCanvas.width = img.width;
newCanvas.height = img.height;

Genghiz Cohen

Latest

Controls

W, A, S & D = Move camera in the X-Z plane. Does not account for camera direction, yet.

Q & E = Rotate camera.
Shift and Crtl = Y axis

Again, use FireFox.

Genghiz Cohen

Not sure if anyone is interested or if this is like me posting in Google+....

Colonel Panic

Keep posting man, its more interesting that most posts here!