我想使用纯 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。
最佳答案
您的代码几乎(见下文)本身是正确的，但不幸的是，当您使用来自页面本身以外的其他来源的图像时，由于 CORS (security feature)，必须满足某些条件才能使其正常工作。 .
您不能开箱即用地使用来自其他来源的图像。他们所在的服务器需要设置 accept-* header 以允许这样做。
如果不是，您的 getImageData 和 toDataURL 将是空白的(抛出一个您可以在控制台中看到的安全错误)。
如果您无权修改服务器，解决此问题的唯一方法是使用您自己的服务器作为图像代理(http://myServer/getImage.cgi|php|aspx.. .?http/otherServer/img)
正如评论中所指出的，始终设置 src after onload 以确保 onload 已初始化。
var pic = new Image();
pic.onload = function() { /* funky stuff here */ };
pic.src = 'http://i.imgur.com/hvGAPwJ.png'; //Last
关于javascript - 如何从图像中获取像素的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17615876/