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