Получение цвета пикселя с холста

Question

Я нашел много примеров, показывающих, как получить цвет пикселя в определенной точке изображения. В основном все они похожи. Например:

canvas = document.getElementById('something'); 
context = canvas.getContext('2d'); 
var pixel = context.getImageData(x, y, 1, 1).data; 
console.log(pixel[0] + ' ' + pixel[1] + ' ' + pixel[2]); 

Однако, когда я выполнение кода, приведенный выше него всегда дает мне одни и те же результаты: «0 0 0 0» или «0 0 0 255», независимо от того, что является фактическим цветом изображения , Я пробовал его на разных цветах, и вывод всегда один и тот же. Может кто-нибудь объяснить мне, почему это происходит? Почему меняется только значение альфы? (и почему это всегда только 0 или 255) Может быть, мне нужно каким-то образом отдать результаты или я не получу их правильно?

Answer 1

example jsbin you've linked to в комментариях работает отлично (кроме e.pageX, где она должна быть e.pageY, но не изменяя результата), то вопрос здесь фактический ожидаемый результат.

Где он был нарисован черным цветом, вы получаете 0 0 0 255 (т.е. непрозрачный черный). Там, где он не был нарисован (и, следовательно, красный), вы получаете 0 0 0 0, который является «значениями по умолчанию (0)» и прозрачным, поэтому вы видите красное цветное изображение фона. Ничего на самом деле на холст в этот момент - он прозрачный.

Вот обновленный пример, где холст разделен на 4. Первые 3 столбца показывают разные выходы, а последний - 0 0 0 0 из-за того, что холст не нарисован в этой точке - цвет фона не является частью данные изображения для холста.

var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 
ctx.fillStyle = "black"; 
 
ctx.fillRect(0, 0, 75, 150); 
 
ctx.fillStyle = "blue"; 
 
ctx.fillRect(75, 0, 75, 150); 
 
ctx.fillStyle = "yellow"; 
 
ctx.fillRect(150, 0, 75, 150); 
 

 

 
function echoColor(e){ 
 
    
 
\t var imgData = ctx.getImageData(e.pageX, e.pageY, 1, 1); 
 
\t red = imgData.data[0]; 
 
\t green = imgData.data[1]; 
 
\t blue = imgData.data[2]; 
 
\t alpha = imgData.data[3]; 
 
\t console.log(red + " " + green + " " + blue + " " + alpha); \t 
 
}

<canvas id="myCanvas" width="300" height="150" style="background:red;" onclick="echoColor(event)"> 
 
</canvas>