title: Get pixel from bitmap
body: <p>I need to process pixeldata from a 1000x1000px *.bmp image (~1MiB) in javascript<br>
  At the moment i am a bit stuck, because the page freezes when i try to dump the data to the console.<br>
  the important code so far:  </p>
  
  <pre><code>var img = new Image();
  img.src = 'image.bmp';
  context.drawImage(img, 0, 0);
  console.log(context.getImageData(0, 0, canvas.height, canvas.width));
  </code></pre>
  
  <p>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.</p>
  
  <p>EDIT:</p>
  
  <p>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)</p>
  
  <pre><code>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&lt;canvas.height;i++){
      pixel[i] = new Array();
      for(j=0;j&lt;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
  </code></pre>
  
  <p>no performance issues :) only quirk is that rows/columns are reversed</p>