2

我想使用纯 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。

4

3 回答 3

4

您的代码本身几乎（见下文）是正确的，但不幸的是，当您使用来自页面本身以外的其他来源的图像时，由于CORS（安全功能），某些标准必须存在才能正常工作。

您不能开箱即用地使用来自其他来源的图像。他们所在的服务器需要设置 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-12T13:22:43.280 回答
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>

现在的问题只是跨域限制。

于 2013-07-12T13:29:15.413 回答
0

要解决跨源限制，您可以添加以下行：

pic.crossOrigin = "Anonymous";

在定义 pic var 之后。

但在某些情况下可能不起作用。

于 2016-02-11T02:50:33.373 回答