Javascript getImageData给出了；“未定义”不是一个函数；错误_Javascript_Html_Getimagedata

Javascript getImageData给出了；“未定义”不是一个函数；错误

javascript html

Javascript getImageData给出了；“未定义”不是一个函数；错误,javascript,html,getimagedata,Javascript,Html,Getimagedata,我尝试将图像加载到画布中，然后获取我在图像中单击的像素的颜色数据 <html> <body> <canvas id="kartina" width="500" height="500"></canvas> <form> <input type="text" id="textField"> </form> var canvas=document.getElementById("kartina"); var ct

我尝试将图像加载到画布中，然后获取我在图像中单击的像素的颜色数据

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


var canvas=document.getElementById("kartina");
var ctx=canvas.getContext("2d");
var textField=document.getElementById("textField");
canvas.addEventListener('click',function(event){
    var x=event.x;
    var y=event.y;
    console.log(x);
    console.log(y);
    var p=canvas.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="http://www.nasa.gov/images/content/54344main_hh46_47.highres.jpg";

</script>
</html>

我认为问题可能是跨域来源安全限制，因此我尝试从以下位置添加图像加载程序：


//添加在开始脚本标记下面
函数loadImage（）{
var输入、文件、fr、img；
if（typeof window.FileReader！=“函数”）{
写入（“此浏览器尚不支持文件API。”）；
返回；
}
输入=document.getElementById（'imgfile'）；
如果（！输入）{
写（“嗯，找不到imgfile元素。”）；
}
如果（！input.files）{
写入（“此浏览器似乎不支持文件输入的`files`属性。”）；
}
如果（！input.files[0]），则为else{
写入（“请在单击“加载”之前选择一个文件”）；
}
否则{
file=input.files[0]；
fr=新文件读取器（）；
fr.onload=createImage；
fr.readAsDataURL（文件）；
}
函数createImage（）{
img=新图像（）；
img.onload=图像加载；
img.src=fr.result；
}
函数imageLoaded（）{
var canvas=document.getElementById（“kartina”）
canvas.width=img.width；
canvas.height=img.height；
var ctxLocal=canvas.getContext（“2d”）；
ctxLocal.drawImage（img，0,0）；
警报（canvas.toDataURL（“image/png”）；
}
函数写入（x）{
控制台日志（x）；
}
}

但这给了我同样的错误。我做错了什么？

应该在画布上下文对象上调用方法：

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

应在画布上下文对象上调用方法：

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

如上所述：

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

如上所述：

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

好的，这允许执行

getImageData

，而没有错误，但RGB值返回“未定义”。好的，这允许执行

getImageData

，而没有错误，但RGB值返回“未定义”。