Javascript 使用getImageData时遇到问题
我试图通过canvas标记读取图像数据，每次我试图检索和显示这些数据时，都会出现0。即使我将数据抓取限制为1像素，它也会出现“0，0，0，0”。奇怪的是，我可以使用fillRect检索数据，但在绘制图像时，它会显示为零。我将使用这个脚本来比较像素，以确定模式是否可重复，但首先我需要确保我可以首先读取该数据 下面是我的代码。我有点过时了，使用文本编辑器和浏览器来测试。因此，我没有在一些人使用的任何WYSIWYG编辑器上看到这一点。您只需使用一个映像并更改源代码即可使其在本地工作。如果有人要求，我可以在别处安装 我希望我能了解一下为什么这不起作用Javascript 使用getImageData时遇到问题,javascript,html,html5-canvas,getimagedata,Javascript,Html,Html5 Canvas,Getimagedata,我试图通过canvas标记读取图像数据，每次我试图检索和显示这些数据时，都会出现0。即使我将数据抓取限制为1像素，它也会出现“0，0，0，0”。奇怪的是，我可以使用fillRect检索数据，但在绘制图像时，它会显示为零。我将使用这个脚本来比较像素，以确定模式是否可重复，但首先我需要确保我可以首先读取该数据 下面是我的代码。我有点过时了，使用文本编辑器和浏览器来测试。因此，我没有在一些人使用的任何WYSIWYG编辑器上看到这一点。您只需使用一个映像并更改源代码即可使其在本地工作。如果有人要求，我可
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body { background-color:#dedddd }
canvas { background-color:white; padding:20px }
#colorInfo { width:300px; background-color:white; padding:20px }
</style>
</head>
<body>
<canvas id="iLikeCookies" width="300" height="300">Your browser kinda sucks. Can't even draw a canvas. For shame.</canvas>
<div id="header"></div>
<div id="colorInfo"></div>
<script>
var canvas = document.getElementById('iLikeCookies');
var ctx = canvas.getContext('2d');
var img = new Image();
pixelData = '';
// function to read all pixels and build into string of RGBa values.
var read = function() {
// loop through each row
for(var y = 0; y < canvas.height; y++) {
// loop through each column
for(var x = 0; x < canvas.width; x++) {
// grabbing individual pixel data
var red = pixels[((canvas.width * y) + x) * 4];
var green = pixels[((canvas.width * y) + x) * 4 + 1];
var blue = pixels[((canvas.width * y) + x) * 4 + 2];
var alpha = pixels[((canvas.width * y) + x) * 4 + 3];
// adding current pixel data to string
pixelData += "RGBa(" + red + ", " + green + ", " + blue + ", " + alpha + ") <br/>";
}
}
};
img.onload = function() {
ctx.drawImage(img, 0, 0, 300, 300);
};
// ctx.fillStyle = "rgb(123,40,170)"
// ctx.fillRect(0,0,300,300)
img.src = 'pattern2.jpg';
imgData = ctx.getImageData(0, 0, canvas.width-299, canvas.height-299);
pixels = imgData.data
read();
console.log(img.width + ", " + img.height);
document.getElementById("header").innerHTML = "Here are the " + canvas.height*canvas.width + " pixels found in the image.<br/>";
document.getElementById("colorInfo").innerHTML = pixelData;
console.log(pixelData);
</script>
</body>
</html>
正文{背景色：#deddd}
画布{背景色：白色；填充：20px}
#colorInfo{宽度：300px；背景色：白色；填充：20px}
你的浏览器有点糟糕。连画布都画不出来。因为羞愧。
var canvas=document.getElementById（'iLikeCookies'）；
var ctx=canvas.getContext（'2d'）；
var img=新图像（）；
像素数据=“”；
//函数读取所有像素并生成RGBa值字符串。
var read=函数（）{
//循环遍历每一行
对于（变量y=0；y”；
}
}
};
img.onload=函数（）{
ctx.drawImage（img，0，0，300，300）；
};
//ctx.fillStyle=“rgb（123,40170）”
//ctx.fillRect（0,0300）
img.src='pattern2.jpg'；
imgData=ctx.getImageData（0,0，canvas.width-299，canvas.height-299）；
像素=imgData.data
read（）；
主控台对数（img.width+”，“+img.height）；
document.getElementById（“header”）.innerHTML=“这里是在图像中找到的“+canvas.height*canvas.width+”像素。
”；
document.getElementById（“colorInfo”）.innerHTML=pixelData；
console.log（像素数据）；
imgData=…img.onloadimg.crossOrigin='anonymous'安全性错误img.crossOrigin = 'anonymous';
img.src = 'pattern2.jpg';
img.onload = function() {
ctx.drawImage(img, 0, 0, 300, 300);
// ctx.fillStyle = "rgb(123,40,170)"
// ctx.fillRect(0,0,300,300)
imgData = ctx.getImageData(0, 0, canvas.width - 299, canvas.height - 299);
pixels = imgData.data
read();
console.log(img.width + ", " + img.height);
document.getElementById("header").innerHTML = "Here are the " + canvas.height * canvas.width + " pixels found in the image.<br/>";
document.getElementById("colorInfo").innerHTML = pixelData;
console.log(pixelData);
};
img.crossOrigin='anonymous'；
img.src='pattern2.jpg'；
img.onload=函数（）{
ctx.drawImage（img，0，0，300，300）；
//ctx.fillStyle=“rgb（123,40170）”
//ctx.fillRect（0,0300）
imgData=ctx.getImageData（0,0，canvas.width-299，canvas.height-299）；
像素=imgData.data
read（）；
主控台对数（img.width+”，“+img.height）；
document.getElementById（“header”）.innerHTML=“这里是在图像中找到的“+canvas.height*canvas.width+”像素。
”；
document.getElementById（“colorInfo”）.innerHTML=pixelData；
console.log（像素数据）；
};
imgData=…img.onloadimg.crossOrigin='anonymous'安全性错误img.crossOrigin = 'anonymous';
img.src = 'pattern2.jpg';
img.onload = function() {
ctx.drawImage(img, 0, 0, 300, 300);
// ctx.fillStyle = "rgb(123,40,170)"
// ctx.fillRect(0,0,300,300)
imgData = ctx.getImageData(0, 0, canvas.width - 299, canvas.height - 299);
pixels = imgData.data
read();
console.log(img.width + ", " + img.height);
document.getElementById("header").innerHTML = "Here are the " + canvas.height * canvas.width + " pixels found in the image.<br/>";
document.getElementById("colorInfo").innerHTML = pixelData;
console.log(pixelData);
};
img.crossOrigin='anonymous'；
img.src='pattern2.jpg'；
img.onload=函数（）{
ctx.drawImage（img，0，0，300，300）；
//ctx.fillStyle=“rgb（123,40170）”
//ctx.fillRect（0,0300）
imgData=ctx.getImageData（0,0，canvas.width-299，canvas.height-299）；
像素=imgData.data
read（）；
主控台对数（img.width+”，“+img.height）；
document.getElementById（“header”）.innerHTML=“这里是在图像中找到的“+canvas.height*canvas.width+”像素。
”；
document.getElementById（“colorInfo”）.innerHTML=pixelData；
console.log（像素数据）；
};
img.crossOrigin='anonymous'应该可以解决这个问题。我感谢您的指导。我将研究从服务器上进行尝试，找出导致错误的原因，并向您报告。@Xufox。默认情况下，从网页域以外的域加载图像会污染画布。污染画布会自动禁用context.getImageData
。设置img.crossOrigin
而不同时配置其他域映像服务器以匿名方式交付其映像将无法满足跨源限制，画布仍将受到污染。；-）安装了MAMP并运行了脚本，它运行正常！我将对此进行更多的研究，以便更好地理解它，但至少我现在可以继续编写我的脚本。非常非常感谢@Xufox解决了我的问题！谢谢你在@markE添加了一些额外的信息！执行此操作时，它会将以下内容抛出控制台：未捕获安全性错误：未能在“CanvasRenderingContext2D”上执行“getImageData”：canva