Example Canvas stuff

$.getImageData({

url: "http://farm7.staticflickr.com/6173/6252560683_5af402c02d_b.jpg", success: function(image){ // Set up the canvas var can = document.getElementsByTagName('canvas')[0]; var ctx = can.getContext('2d');

// Set the canvas width and heigh to the same as the image $(can).attr('width', image.width); $(can).attr('height', image.height);

// Draw the image on to the canvas ctx.drawImage(image, 0, 0, image.width, image.height);

// Get the image data

var gridData = [];

var currentX = 0; var currentY = 0; var gridWidth = image.width/2; var gridHeight = image.height/2; var endX = 0; var endY = 0;

for(var k = 0; k < 2; k++){

for(var l = 0; l < 2; l++){

currentX = (k*gridWidth); currentY = (l*gridHeight);

endX = ((k+1)gridWidth); endY = ((l+1)gridWidth);

var box = {}; box.x_start = currentX; box.y_start = currentY; box.x_end = endX; box.y_end = endY;

var image_data = ctx.getImageData(currentX, currentY, gridWidth, gridHeight); var image_data_array = image_data.data;

var r = 0; var g = 0; var b = 0; var count = 0;

for (var i = 0, j = image_data_array.length; i < j; i+=4) {

r += image_data_array[i]; g += image_data_array[i+1]; b += image_data_array[i+2];

count+=1;

}

box.r = r/count; box.g = g/count; box.b = b/count;

gridData.push(box);

}

}

$(".result").html(JSON.stringify(gridData));

// Write the image data to the canvas ctx.putImageData(image_data, 0, 0);

}, error: function(xhr, text_status){

console.log(xhr);

console.log("fml!"+text_status);

// Handle your error here

}

});