通過JavaScript Thought Canvas讀取像素數據
[英]Reading pixel data by JavaScript thought Canvas
問題描述
我無法從圖像中讀取像素的RGBA數據，但是我面臨的所有RGBA數據（所有像素的所有4個字節）均為零值。 我將此代碼用於JavaScript：
順便說一下，我將此代碼用於html。 我在Chrome或Firefox上運行html，但是當我看到控制台日志時，pixel Data的所有值均為零。為什么？
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 () { 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 () { // 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> <title>Image processing</title> <style type="text/css"> </style> </head> <body> <canvas id="mycanvas" width="300" height="227"> </canvas> <img src="https://mdn.mozillademos.org/files/5397/rhino.jpg" id="image" style="display:none;"> </style> </style>=""> <script src="img.js"> </script> </body> </html>
2 個解決方案
解決方案1
0 2017-06-01 10:23:36
由於圖片來自其他域，因此無法使用。 畫布僅接受相同來源的圖像。 您不能也不應使用不支持CORS的外部源中的getImageData（）。
但是您可以將圖像轉換為dataURL，然后繪制畫布。
編輯：對不起，表達不正確。 唯一的方法是將映像本地下載到您的服務器/域，然后將其繪制在畫布上。
解決方案2
0 2017-06-11 10:47:53
我解決了我的問題。
首先，正如Mohanesh所說，我們需要使用Localhost或http域。因此，我安裝了Python，並使用此命令創建了localhost erver。
Python -m http.server
其次，我使用了creatpattern命令而不是drawimage。這段代碼對我有用：
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>
Javascript Canvas獲取圖像像素數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.