通過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

回答

相關問題