来自 getImageData 的 RGB 值未定义
RGB values from getImageData are undefined
我想单击图像并获取该像素的 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 值都是 "undefined",例如:
x: 157, y: 89, R: undefined, G: undefined, B: undefined
如何获得正确的 RGB 值?
getImageData
returns an ImageData
对象,其 data
属性 是包含实际 RGB 值的数组。
基本上,你错过了 .data
:
var p = ctx.getImageData(x,y,1,1).data;
您需要访问 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];
我想单击图像并获取该像素的 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 值都是 "undefined",例如:
x: 157, y: 89, R: undefined, G: undefined, B: undefined
如何获得正确的 RGB 值?
getImageData
returns an ImageData
对象,其 data
属性 是包含实际 RGB 值的数组。
基本上,你错过了 .data
:
var p = ctx.getImageData(x,y,1,1).data;
您需要访问 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];