I need to process pixeldata from a 1000x1000px *.bmp image (~1MiB) in javascript
At the moment i am a bit stuck, because the page freezes when i try to dump the data to the console.
the important code so far:
var img = new Image();
img.src = 'image.bmp';
context.drawImage(img, 0, 0);
console.log(context.getImageData(0, 0, canvas.height, canvas.width));
i guess this is a performance issue, but is there a better way to access the pixel data? i dont really need to read it all at once, reading the pixels one by one would also be fine.
EDIT:
here is the updated code, it will populate a 2d-array with the red-value of the picture (i am dealing with a black/white picture, so thats enough)
var img = new Image();
img.src = 'image.bmp';
context.drawImage(img, 0, 0);
var imgData = context.getImageData(0, 0, canvas.height, canvas.width);
var pixel = new Array();
for(i=0;i<canvas.height;i++){
pixel[i] = new Array();
for(j=0;j<canvas.width;j++){
pixel[i][j] = imgData.data[i*canvas.width+j*4];
}
}
//now pixel[y][x] contains the red-value of the pixel at xy in img
no performance issues :) only quirk is that rows/columns are reversed
I need to process pixeldata from a 1000x1000px *.bmp image (~1MiB) in javascript
At the moment i am a bit stuck, because the page freezes when i try to dump the data to the console.
the important code so far:
var img = new Image();
img.src = 'image.bmp';
context.drawImage(img, 0, 0);
console.log(context.getImageData(0, 0, canvas.height, canvas.width));
i guess this is a performance issue, but is there a better way to access the pixel data? i dont really need to read it all at once, reading the pixels one by one would also be fine.
EDIT:
here is the updated code, it will populate a 2d-array with the red-value of the picture (i am dealing with a black/white picture, so thats enough)
var img = new Image();
img.src = 'image.bmp';
context.drawImage(img, 0, 0);
var imgData = context.getImageData(0, 0, canvas.height, canvas.width);
var pixel = new Array();
for(i=0;i<canvas.height;i++){
pixel[i] = new Array();
for(j=0;j<canvas.width;j++){
pixel[i][j] = imgData.data[i*canvas.width+j*4];
}
}
//now pixel[y][x] contains the red-value of the pixel at xy in img
no performance issues :) only quirk is that rows/columns are reversed
Share Improve this question edited Jul 2, 2019 at 13:17 taiar 5626 silver badges22 bronze badges asked Nov 11, 2010 at 12:07 fruightfruight 1081 silver badge6 bronze badges 3- 2 Silly Question: Have you tried to do it with a small image first to make it work? – epascarello Commented Nov 11, 2010 at 12:26
- 4 You are dumping 1 million pixels to the console and wondering why the browser freezes? Seriously? – Pekka Commented Nov 11, 2010 at 12:26
- 1 Pekka: yeah, i figured that it was a performance issue, if i knew a way to access the pixels one by one, i would not have asked. – fruight Commented Nov 11, 2010 at 13:01
2 Answers
Reset to default 4var data = context.getImageData(0, 0, canvas.height, canvas.width);
var count = 0;
var tmr = null;
var length = data.length;
(pix = function() {
var r = data[count + 0];
var g = data[count + 1];
var b = data[count + 2];
var a = data[count + 3];
var rgba = 'rgba(' + r + ' ,' + g + ' ,' + b + ' ,' + a + ')';
console.log(rgba);
if((count += 4) >= length) {
clearTimeout(tmr);
return;
}
tmr = setTimeout(pix, 1000/30); //at 30 fps
})();
Try creating a canvas of 1px X 1px, move the image and then read the imageData