如何從圖像中獲取像素的顏色？

我想使用純JavaScript從圖像中獲取像素的顏色。如何從圖像中獲取像素的顏色？

我寫這個劇本，但沒有奏效：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title>Get Pixel</title> 

<script type='text/javascript'> 
window.onload = function() { 
var canvas = document.createElement("canvas"); 

var pic = new Image(); 
pic.src = 'http://i.imgur.com/hvGAPwJ.png'; 
pic.onload = function() { 

canvas.width = pic.width; 
canvas.height = pic.height; 
var ctx = canvas.getContext("2d"); 

ctx.drawImage(pic, 0, 0);} 

var c = canvas.getContext('2d'); 
var p = c.getImageData(7, 7, 1, 1).data; 
var hex = "RGB = " + p[0]+", "+p[1]+", "+p[2]; 

document.getElementById("output").innerHTML = hex; 
} 
</script> 

</head> 
<body> 
<div id="output"></div> 
</body> 
</html>

如何更改代碼，你會他工作正常？

例如，對於畫面「http://i.imgur.com/hvGAPwJ.png」，結果應該是RGB = 255，255，255

來源

2013-07-12 Alexan-Dwer

注意：你應該在設置'src'之前設置'onload']（http://stackoverflow.com/questions/4776670/should-setting-an-image-src-to-data-url-be -立即可用）。 – Phrogz

如果你正確地縮進您的腳本，錯誤就更加明顯了：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title>Get Pixel</title> 

<script type='text/javascript'> 
window.onload = function() { 
    var canvas = document.createElement("canvas"); 

    var pic = new Image(); 
    pic.src = 'http://i.imgur.com/hvGAPwJ.png'; 
    pic.onload = function() { 

     canvas.width = pic.width; 
     canvas.height = pic.height; 
     var ctx = canvas.getContext("2d"); 

     ctx.drawImage(pic, 0, 0); 
    } 

    var c = canvas.getContext('2d'); 
    var p = c.getImageData(7, 7, 1, 1).data; 
    var hex = "RGB = " + p[0]+", "+p[1]+", "+p[2]; 

    document.getElementById("output").innerHTML = hex; 
} 
</script> 

</head> 
<body> 
<div id="output"></div> 
</body> 
</html>

要設置在圖像的加載事件的函數，而不是等着你更新的內容之前發生的div。

您應該pic.onload函數內部自定pic.src移動的一切，除了：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title>Get Pixel</title> 

<script type='text/javascript'> 
window.onload = function() { 
    var canvas = document.createElement("canvas"); 

    var pic = new Image(); 
    pic.onload = function() { 

     canvas.width = pic.width; 
     canvas.height = pic.height; 
     var ctx = canvas.getContext("2d"); 

     ctx.drawImage(pic, 0, 0); 

     var c = canvas.getContext('2d'); 
     var p = c.getImageData(7, 7, 1, 1).data; 
     var hex = "RGB = " + p[0]+", "+p[1]+", "+p[2]; 

     document.getElementById("output").innerHTML = hex; 
    } 
    pic.src = 'http://i.imgur.com/hvGAPwJ.png'; 
} 
</script> 

</head> 
<body> 
<div id="output"></div> 
</body> 
</html>

現在的問題僅僅是跨源限制。

來源

2013-07-12 13:29:15 rjmunro

您的代碼幾乎（見下文）正確的自身但不幸的是，當您使用圖片來自其他來源由於CORS (security feature)，頁面本身必須有一定的標準才能工作。

您不能使用開箱即用的圖像。他們所在的服務器需要設置accept- *標頭來允許這一點。

如果不是您的getImageData和toDataURL將爲空白（引發安全錯誤，您可以在控制檯中看到）。

如果您沒有訪問修改服務器的唯一途徑來解決這個問題是使用自己的服務器作爲圖像代理（http://myServer/getImage.cgi|php|aspx...?http/otherServer/img）

正如在評論中指出的總是設置src後onload因此您確定onload被初始化。

var pic = new Image(); 
pic.onload = function() { /* funky stuff here */ }; 
pic.src = 'http://i.imgur.com/hvGAPwJ.png'; //Last

來源

2013-07-12 13:22:43 K3N

爲了解決跨來源的限制，可能會加入這一行：

pic.crossOrigin = "Anonymous";

右鍵定義PIC變種之後。

雖然在某些情況下可能不起作用。

來源

2016-02-11 02:50:33 jjyepez

回答

相關問題