javascript getImageData无法获取像素值 帆布 window.onload=函数（）{ var preview=document.getElementById（'preview'）； var r=document.getElementById（'r'）； var g=document.getElementById（'g'）； var b=document.getElementById（'b'）； var a=document.getElementById（'a'）； var canvas=document.getElementById（'myCanvas'）； var building=newimage（）； building.src=“img/cinema.png”； building.onload=函数（）{ var c=canvas.getContext（'2d'）.drawImage（building，0,0,256,200,0,0,256,200）； var img=c.getImageData（150,160,1,1）； var idata=img.data； var red=idata[0]； 绿色变量=idata[1]； var blue=idata[2]； var alpha=idata[3]； r、 innerHTML=红色； g、 innerHTML=绿色； b、 innerHTML=蓝色； a、 innerHTML=（alpha>0）？alpha:'透明'； } } 正文{margin:0px；padding:0px；} ul li{字体大小：粗体；} ul li span{字体重量：正常；} 红色：空 绿色：空 蓝色：空 Alpha:NULL
我只想测试getImageData函数 图像可以在chrome上显示，但javascript getImageData无法获取像素值 帆布 window.onload=函数（）{ var preview=document.getElementById（'preview'）； var r=document.getElementById（'r'）； var g=document.getElementById（'g'）； var b=document.getElementById（'b'）； var a=document.getElementById（'a'）； var canvas=document.getElementById（'myCanvas'）； var building=newimage（）； building.src=“img/cinema.png”； building.onload=函数（）{ var c=canvas.getContext（'2d'）.drawImage（building，0,0,256,200,0,0,256,200）； var img=c.getImageData（150,160,1,1）； var idata=img.data； var red=idata[0]； 绿色变量=idata[1]； var blue=idata[2]； var alpha=idata[3]； r、 innerHTML=红色； g、 innerHTML=绿色； b、 innerHTML=蓝色； a、 innerHTML=（alpha>0）？alpha:'透明'； } } 正文{margin:0px；padding:0px；} ul li{字体大小：粗体；} ul li span{字体重量：正常；} 红色：空 绿色：空 蓝色：空 Alpha:NULL,javascript,html,canvas,Javascript,Html,Canvas,我只想测试getImageData函数 图像可以在chrome上显示，但iData[]的值都为空 我使用的png是256*200像素。有人能给我一些提示吗 上面的脚本不能工作？不，那不行-如果你没有发现c的值与你想象的不同，我会感到惊讶 您似乎将c视为canvas.getContext（'2d'）的结果-但是，如果您查看代码，c保存调用drawImage（building，0，0，256，200，0，0，256，200）的结果 那么，这意味着什么？您已经正确地抓取了上下文（放入临时变量），然后使
iData[]上面的脚本不能工作？不，那不行-如果你没有发现
cccdrawImage（building，0，0，256，200，0，0，256，200）的结果
那么，这意味着什么？您已经正确地抓取了上下文（放入临时变量），然后使用它来绘制图像。此绘图操作的结果是存储到c
中的内容
进行以下更改：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Canvas</title>
<script>
window.onload = function () {
var preview = document.getElementById('preview');
var r = document.getElementById('r');
var g = document.getElementById('g');
var b = document.getElementById('b');
var a = document.getElementById('a');
var canvas = document.getElementById('myCanvas');
var building = new Image();
building.src = "img/cinema.png";
building.onload = function(){
var c = canvas.getContext('2d').drawImage(building, 0, 0, 256, 200, 0, 0, 256, 200);
var img = c.getImageData(150, 160, 1, 1);
var idata = img.data;
var red = idata[0];
var green = idata[1];
var blue = idata[2];
var alpha = idata[3];
r.innerHTML = red;
g.innerHTML = green;
b.innerHTML = blue;
a.innerHTML = (alpha > 0) ? alpha : 'Transparent';
}
}
</script>
<style type="text/css" media="screen">
body { margin: 0px; padding: 0px; }
ul li { font-weight: bold; }
ul li span { font-weight: normal; }
</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="300">
</canvas>
<ul>
<li><div id="preview"></div></li>
<li>Red: <span id="r">NULL</span></li>
<li>Green: <span id="g">NULL</span></li>
<li>Blue: <span id="b">NULL</span></li>
<li>Alpha: <span id="a">NULL</span></li>
</ul>
</body>
</html>
谢谢你的快速回复。我已经按照您的建议更改了代码，但像素值仍然为空。如果我不绘制png文件，只需调用fillStyle=“rgb（0,0,0）”和fillRect（0,0300300），像素值数组可以显示0,0,0255。@user2975639-不客气。嗯，没错。画布保存32位像素数据。每个像素都有一个红色、绿色、蓝色和alpha值。当您使用rgb（0,0,0）
时，您只提供了32位中的24位。然后浏览器将alpha值设置为255。因此，它仍然有一个颜色值-在您的示例中，该值对应于黑色。尝试使用您选择的图像编辑器（例如Gimp或Photoshop）绘制渐变。从255,0,0,0运行到0,0,0255-与执行255,0,0,0到255255相比，您将得到不同的结果…谢谢。但我不知道为什么不能获得png（32位）像素。>_啊，我想我刚刚意识到问题可能是什么。如何打开此html文件？您是从本地（绝对）位置还是通过Web服务器打开它？第一个看起来像file:///C:/xampp/htdocs/enhzflep/canvasQuestion.html
而第二个是http://localhost/enhzflep/canvasQuestion.html
-如果打开javascript控制台，您可能会看到一条消息，提示无法从画布获取图像数据，因为画布已被跨源数据污染。
var c = canvas.getContext('2d');
c.drawImage(building, 0, 0, 256, 200, 0, 0, 256, 200);
var img = c.getImageData(150, 160, 1, 1);