您的代码本身几乎(见下文)是正确的,但不幸的是,当您使用来自页面本身之外的其他来源的图像时,由于CORS(安全功能),必须满足某些标准才能使其正常工作。
您不能直接使用其他来源的图像。他们所在的服务器需要设置接受-*标头以允许这样做。
如果不是,您的
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
如果正确缩进脚本,错误会变得更加明显:
<!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.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>
现在的问题只是跨源限制。
要解决跨源限制,您可以添加此行:
pic.crossOrigin = "Anonymous";
定义图片变量后。
但在某些情况下可能不起作用。
没用:( 我保存并在firefox下运行并没有显示图片:
<pre>
<!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.crossOrigin = "Anonymous";
pic.src = '1.jpg';
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>
</pre>