Como usar JavaScript ou jQuery para ler um pixel de uma imagem quando o usuário clica nele?

Como posso usar JavaScript ou jQuery para ler a cor de um pixel de uma imagem quando o usuário clica nela? (claro que temos o valor (x, y) deste pixel assinando o evento click).

Se você conseguir desenhar a imagem em um elemento canvas, poderá usar o método getImageData para retornar uma matriz contendo valores 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; 

Eu procurei uma maneira de contar pixels verdes em uma imagem e acabei escrevendo minhas próprias funções. Aqui está

A magia ®

 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); } 

De onde você tira imgData?

  1. criar
  2. obter o context canvas
  3. copiar para
  4. obter dados da imagem da canvas (uma matriz de valores [r,g,b,a,r,g,b,a,r,g,..] )
  5. do `The magic`®

código le:

 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 

Para um exemplo de trabalho, veja o código fonte de http://qry.me/xyscope/