Get the RGBa value for each pixel in an image via <canvas>

gistfile1.js

$(document).ready(function (){
  // Get the image and canvas nodes
  var img = $('#original_image')[0];
  var canvas = $('#original_canvas')[0];

  // confirm that the image has loaded
  img.addEventListener("load", function() {
    // set the canvas dimensions
    canvas.width = img.width;
    canvas.height = img.height;

    //draw the original image to the canvas
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

    // loop over each pixel on the canvas and push it's RBGa value into an array
    var original_image_color_data = []
    // First loop over the y axis (top to bottom)
    for(var y = 0; y <= img.height; y++) {
      // Now loop over the x axis (left to right)
      for(var x = 0; x <= img.width; x++) {

        // Get the RGBa value for that pixel
        original_image_color_data.push(canvas.getContext('2d').getImageData(x, y, 1, 1).data);
      }
    }
    
    // See the entire array of RGBa values
    console.log(original_image_color_data);
   }, false);
});
~