如何从图像中获取像素的颜色？
Posted
技术标签:
【中文标题】如何从图像中获取像素的颜色？【英文标题】：How to get the color of a pixel from image? 【发布时间】：2013-07-11 01:16:15 【问题描述】：我想使用纯 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。
【问题讨论】：
注意：你应该set theonload before setting the src。
【参考方案1】：
您的代码本身几乎（见下文）是正确的，但不幸的是，当您使用来自页面本身以外的其他来源的图像时，由于CORS (security feature)，必须满足某些标准才能使其正常工作。
您不能开箱即用地使用其他来源的图像。他们所在的服务器需要设置 accept-* 标头以允许这样做。
如果不是，您的 getImageData 和 toDataURL 将为空白（引发您可以在控制台中看到的安全错误）。
如果您无权修改服务器，解决此问题的唯一方法是使用您自己的服务器作为图像代理 (http://myServer/getImage.cgi|php|aspx...?http/otherServer/img)
正如在 cmets 中指出的，总是设置 src 在 onload 所以你确定onload 被初始化了。
var pic = new Image();
pic.onload = function() /* funky stuff here */ ;
pic.src = 'http://i.imgur.com/hvGAPwJ.png'; //Last
【讨论】：
【参考方案2】：如果您正确缩进脚本，错误会变得更加明显：
<!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.src 之外，您应该移动 pic.onload 函数中的所有内容：
<!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>
现在问题只是跨域限制。
【讨论】：
【参考方案3】：要解决跨域限制，您可以添加以下行：
pic.crossOrigin = "Anonymous";
在定义图片变量之后。
但在某些情况下可能不起作用。
【讨论】：
以上是关于如何从图像中获取像素的颜色？的主要内容，如果未能解决你的问题，请参考以下文章