getImageData给出“undefined is not a function”错误

Question

I'm trying to load an image into a canvas, and then get the color data for a pixel that I click on in the image. 我正在尝试将图像加载到画布中，然后获取我在图像中单击的像素的颜色数据。

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

getImageData() produces this error: getImageData()产生此错误：

Uncaught TypeError: undefined is not a function

I thought maybe the problem was the cross-domain origin security restrictions, so I tried adding the image loader from this answer : 我想也许问题是跨域安全限制，所以我尝试从这个答案添加图像加载器：

<!--added below the textField form -->
<form action='#' onsubmit="return false;">
    <input type='file' id='imgfile' />
    <input type='button' id='btnLoad' value='Load' onclick='loadImage();' />
</form>

//added below the opening script tag
function loadImage() {
        var input, file, fr, img;

        if (typeof window.FileReader !== 'function') {
            write("The file API isn't supported on this browser yet.");
            return;
        }

        input = document.getElementById('imgfile');
        if (!input) {
            write("Um, couldn't find the imgfile element.");
        }
        else if (!input.files) {
            write("This browser doesn't seem to support the `files` property of file inputs.");
        }
        else if (!input.files[0]) {
            write("Please select a file before clicking 'Load'");
        }
        else {
            file = input.files[0];
            fr = new FileReader();
            fr.onload = createImage;
            fr.readAsDataURL(file);
        }

        function createImage() {
            img = new Image();
            img.onload = imageLoaded;
            img.src = fr.result;
        }

        function imageLoaded() {
            var canvas = document.getElementById("kartina")
            canvas.width = img.width;
            canvas.height = img.height;
            var ctxLocal = canvas.getContext("2d");
            ctxLocal.drawImage(img,0,0);
            alert(canvas.toDataURL("image/png"));
        }

        function write(x){
            console.log(x);
        }
}

But this gave me the same error. 但这给了我同样的错误。 What am I doing wrong? 我究竟做错了什么？

Answer 1

应该在canvas上下文对象上调用getImageData方法：

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

Answer 2

As it is written above: 如上所述：

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

then right under it: 然后就在它下面：

textField.value="x: "+x+", y: "+y+", R: "+p.data[0]+", G: "+p.data[1]+", B: "+p.data[2];

getImageData给出“undefined is not a function”错误

问题描述

2 个解决方案

解决方案1
3 2015-02-15 19:40:45

解决方案2
0 2017-08-31 16:50:07

getImageData给出“undefined is not a function”错误

问题描述

2 个解决方案

解决方案1 3 2015-02-15 19:40:45

解决方案2 0 2017-08-31 16:50:07

解决方案1
3 2015-02-15 19:40:45

解决方案2
0 2017-08-31 16:50:07