Question

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

Answer 1

您的代码几乎（见下文）在其自身中是正确但不幸的是，当您使用来自页面本身以外的其他来源的图像时，由于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

Answer 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>

现在问题只是跨越原产地限制。

Answer 3

要解决交叉起源限制，您可以添加以下行：

grep '[-]{2}' phones.txt grep '-{2}' phones.txt grep '.*[-].+[-].+$' phones.txt grep '^\d+[-]\d+[-]\d+$' phones.txt

在定义pic var。

之后

但在某些情况下可能无效。

如何从图像中获取像素的颜色？

3 个答案: