Ответ 1

Если вы можете нарисовать изображение в элементе canvas, вы можете использовать метод getImageData для возврата массива, содержащего значения RGBA.

var img = new Image();
img.src = 'image.jpg';
var context = document.getElementById('canvas').getContext('2d');
context.drawImage(img, 0, 0);
data = context.getImageData(x, y, 1, 1).data;

Ответ 2

Я искал способ подсчета зеленых пикселей в изображении, в итоге написал свои собственные функции. Здесь вы идете

Магия ®

function getPixel(imgData, index) {
  var i = index*4, d = imgData.data;
  return [d[i],d[i+1],d[i+2],d[i+3]] // [R,G,B,A]
}

function getPixelXY(imgData, x, y) {
  return getPixel(imgData, y*imgData.width+x);
}

Где вы получаете imgData?

• создать <canvas>
• получить холст context
• скопировать <img> в <canvas>
• получить данные изображения холста (массив значений [r,g,b,a,r,g,b,a,r,g,..])
• сделать `The magic`®

код:

var cvs = document.createElement('canvas'),
    img = document.getElementsByTagName("img")[0];   // your image goes here
    // img = $('#yourImage')[0];                     // can use jquery for selection
cvs.width = img.width; cvs.height = img.height;
var ctx = cvs.getContext("2d");
ctx.drawImage(img,0,0,cvs.width,cvs.height);
var idt = ctx.getImageData(0,0,cvs.width,cvs.height);

// The magic®
getPixel(idt, 852);  // returns array [red, green, blue, alpha]
getPixelXY(idt,1,1); // same pixel using x,y

Для рабочего примера см. исходный код http://qry.me/xyscope/