Как использовать JavaScript или jQuery для чтения пикселя изображения, когда пользователь нажимает на него?
Как я могу использовать JavaScript или jQuery для чтения цвета пикселя изображения, когда пользователь нажимает на него? (конечно, мы имеем значение (x, y) этого пикселя, подписываясь на событие click).
Ответы
Ответ 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/