Question

我想点击图片并获取该像素的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值都是＆＃34;未定义＆＃34;，例如：

x: 157, y: 89, R: undefined, G: undefined, B: undefined

如何获得正确的RGB值？

Answer 1

getImageData返回一个ImageData对象，其data属性是包含实际RGB值的数组。

基本上，您错过了.data：

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

Answer 2

您需要访问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];

来自getImageData的RGB值未定义

2 个答案: