Javascript getImageData中的RGB值未定义_Javascript_Html_Canvas_Getimagedata

Javascript getImageData中的RGB值未定义

javascript html canvas

Javascript getImageData中的RGB值未定义,javascript,html,canvas,getimagedata,Javascript,Html,Canvas,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

我想点击一个图像，并获得该像素的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值？

返回一个对象，其

数据

属性是包含实际RGB值的数组

基本上，您缺少一个

.data

：

var p = ctx.getImageData(x,y,1,1).data;

您需要访问getImageData返回的对象的data属性

 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];

向上投票。是的……还提到，如果画布不在文档的左上角，那么您还必须根据画布元素的偏移量调整x，y鼠标坐标。正确，尽管John Flatness在您之前几分钟发布了相同的正确答案。我刚刚注意到。肯定是在我打字的时候发生的。我应该删除我的答案吗？还是保留它，因为它有点不同？（他直接从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];