通过JavaScript思考阅读像素数据Canvas

我有一个问题：从图像中读取像素的RGBA数据。但是我面对的是所有RGBA数据（所有像素都是4个字节）零值。我使用此JavaScript的代码：通过JavaScript思考阅读像素数据Canvas

顺便说一下，我使用此代码的HTML。和tehn我通过Chrome或Firefox运行html，但是当我看到控制台日志时，像素数据的所有值都是零。为什么？

var canvas= document.getElementById('mycanvas'); 
 
var c=canvas.getContext("2d"); 
 

 
// c.beginPath(); 
 
// c.moveTo(0,0); 
 
// c.lineTo(500,200); 
 
// c.stroke(); 
 

 
var img = new Image(); 
 
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; 
 
img.crossOrigin = "Anonymous"; 
 

 
// var img= document.getElementById('image') 
 
img.onload=function() { 
 
\t \t c.drawImage(img,0,0); 
 
} 
 

 
var myImageData = c.getImageData(0, 0, 500, 500); 
 
//var myImageData = c.createImageData(600, 600); 
 
var numBytes = myImageData.data.length; 
 
var pixelData=myImageData.data; 
 
console.log (numBytes); 
 
console.log (pixelData); 
 

 
// var x= function() { 
 
\t 
 
// for(var i=0;i<pixelData.length;i+=40) 
 

 
// { 
 

 
// pixelData[i]  = 255 - pixelData[i];  // red 
 
//  pixelData[i + 1] = 255 - pixelData[i + 1]; // green 
 
//  pixelData[i + 2] = 255 - pixelData[i + 2]; // blue 
 
//  } 
 
//  c.putImageData(myImageData, 0, 0); 
 
// }; 
 
// //if (pixelData[i]&&pixelData[i+1]&&pixelData[i+2]===255) { 
 

 
// //console.log (numBytes); 
 

 
// //} 
 

 
// //else {} 
 

 

 
// //}; 
 

 
// // 
 
// x(); 
 

 

 

 
//pixel = imageData.data[((row * (imageData.width * 4)) + (colume * 4)) + colorindex]; 
 

 
//var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception. 
 
//window.location.href=image;

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Image processing</title> 
 
\t <style type="text/css"> 
 
\t 
 
</style> 
 
</head> 
 

 

 
<body> 
 

 
<canvas id="mycanvas" width="300" height="227"> 
 
\t 
 
</canvas> 
 
<img src="https://mdn.mozillademos.org/files/5397/rhino.jpg" id="image" style="display:none;"> 
 
\t 
 
</style> 
 
\t 
 
</style>=""> 
 

 
<script src="img.js"> 
 

 
</script> 
 
\t 
 

 

 
</body> 
 
</html>

来源

2017-06-01 Taher

的可能的复制[CanvasContext2D的drawImage（）问题\ [onload和CORS \]]（https://stackoverflow.com/questions/32880641/canvascontext2d-drawimage-issue-onload-and-cors） – Kaiido

你必须等你的图像加载之前，已经绘制在c anvas在检索其imageData之前。这里你调用'onload'处理程序中的getImageData，这意味着它在'img.src =“...之后被调用。 img.crossOrigin =“...”;'搜索“异步+ javascript”。 – Kaiido

的图像来自另一个域这是行不通的。画布只接受来自相同原点的图像。您不能也不应该使用不支持CORS的外部来源的getImageData（）。

但您可以将图像转换为dataURL，然后绘制画布。

编辑：对不起，没有正确表达。唯一的办法是将图像下载到您的服务器/域，然后在画布上绘制。

来源

2017-06-01 10:23:36 Mohanesh

“*但您可以将图像转换为dataURL，然后绘制画布。*”如果图像不满足交叉原点限制，您将如何将图像转换为dataURL？而且，如果画布受到污染，则不会有任何值，只是一个安全错误。 – Kaiido

嗨Mohanesh 感谢您的答案。我修改了以下步骤，但像素值仍为零。 1-我将图像源更改为在我的PC上正好执行的文件夹。 2-I用于localhost服务器运行html。我在代码中使用img.crossOrigin =“Anonymous”。有什么不对？ – Taher

@Kaiido：我做了编辑。对不起，没有正确表达。 Taher：如果请求的域不接受跨源请求，则设置crossOrgin标头是没有用的。响应应该将** Access-Control-Allow-Origin **设置为“*”以接受来自任何域的请求。 – Mohanesh

我解决了我的问题。

首先作为Mohanesh说我们需要使用本地主机或HTTP域。所以我安装了Python并使用此命令来创建本地主机erver。

的Python -m http.server

其次，我使用了creatpattern命令而不是drawimage.this代码工作对我来说：

var canvas = document.getElementById('mycanvas') 
 
var c = canvas.getContext('2d'); 
 
// canvas.height = window.innerHeight; 
 
// canvas.width = window.innerWidth; 
 
var img = document.getElementById("image") 
 
img.crossOrigin = "Anonymous"; 
 

 
var ptrn = c.createPattern(img, 'no-repeat'); 
 
c.fillStyle = ptrn; 
 
c.fillRect(0, 0, canvas.width, canvas.height); 
 

 
var myImageData = c.getImageData(0, 0, canvas.width, canvas.height); 
 
var numBytes = myImageData.data.length; 
 
var pixelData = myImageData.data; 
 
console.log(numBytes); 
 
console.log(pixelData);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Image processing</title> 
 
    <style type="text/css"> 
 

 
    </style> 
 
</head> 
 

 
<body> 
 
    
 
    <canvas id="mycanvas" width="100" height="100"> 
 
    </canvas> 
 
    <img src="test1.png" alt="" id="image" style="display: none;" /> 
 
    <script src="img22.js"> 
 
    </script> 
 
</body> 
 

 
</html>

来源

2017-06-11 10:47:53 Taher

通过JavaScript思考阅读像素数据Canvas

回答

相关问题