Значения RGB из getImageData не определены

Я хочу щелкнуть изображение и получить значения RGB для этого пикселя.

Вот мой код:

<html>
<body>
<canvas id="kartina" width="500" height="500"></canvas>
<form>
<input type="text" id="textField" size="80">
</form>

</body>
<script>
var canvas=document.getElementById("kartina");
var ctx=canvas.getContext("2d");
var textField=document.getElementById("textField");
canvas.addEventListener('click',function(event){
    var x=event.pageX;
    var y=event.pageY;
    var p=ctx.getImageData(x,y,1,1);
    textField.value="x: "+x+", y: "+y+", R: "+p[0]+", G: "+p[1]+", B: "+p[2];
});


var img=new Image();
img.onload=function(){
ctx.drawImage(img,0,0);
};
img.src="/myApp/pic.jpg";


</script>
</html>

Когда я нажимаю на изображение, текстовое поле правильно заполняется координатами, но все значения RGB «не определены», например:

x: 157, y: 89, R: undefined, G: undefined, B: undefined

Как я могу получить правильные значения RGB?


javascript canvas html getimagedata
person sigil    schedule 16.02.2015    source источник

Ответы (2)


arrow_upward
4
arrow_downward

getImageData возвращает ImageData, свойство data которого представляет собой массив, содержащий фактические значения RGB.

По сути, вам не хватает .data:

var p = ctx.getImageData(x,y,1,1).data;
person John Flatness    schedule 16.02.2015
comment
Проголосовать. Да... А также упомянем, что если холст не находится в верхнем левом углу документа, вы также должны настроить координаты мыши x, y на смещение элемента холста. - person markE; 16.02.2015

arrow_upward
4
arrow_downward

Вам необходимо получить доступ к свойству данных объекта, возвращаемого getImageData.

 var p=ctx.getImageData(x,y,1,1);
 textField.value="x: "+x+", y: "+y+", R: "+p.data[0]+", G: "+p.data[1]+", B: "+p.data[2];
person Community    schedule 16.02.2015
comment
Правильно, хотя Джон Флэтнесс опубликовал тот же правильный ответ за несколько минут до вас. - person markE; 16.02.2015
comment
Я только что это заметил. Должно быть, это произошло, пока я печатал. Должен ли я удалить свой ответ? Или оставить его, так как он немного отличается? (Он берет свойство данных непосредственно из getImageData, избегая других свойств) - person ; 16.02.2015
comment
ИМХО, это честная ошибка, просто оставьте как есть. :-) - person markE; 16.02.2015