logo标签列表

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

javascripthtml5-canvas
3
我想使用纯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>

如何更改代码，使其正常工作？
例如，对于图片“{{link1：http://i.imgur.com/hvGAPwJ.png}}”，结果应为RGB = 255, 255, 255。
注意：在设置 src 之前应该先设置 onload。 - Phrogz
3个回答
5
你的代码本身基本正确，但是当你使用来自页面之外的图像时，由于CORS（安全特性），必须满足某些条件才能正常工作。CORS。

默认情况下，你不能使用来自其他来源的图像。它们所在的服务器需要设置accept-*头以允许此操作。

如果没有这样做，getImageData和toDataURL将为空（控制台中会显示安全错误）。

如果你无法修改服务器，则唯一的解决方法是使用自己的服务器作为图像代理（http://myServer/getImage.cgi|php|aspx...?http/otherServer/img）

如评论中所指出，请始终在onload之后设置src，以确保初始化onload。
var pic = new Image(); 
pic.onload = function() { /* funky stuff here */ };
pic.src = 'http://i.imgur.com/hvGAPwJ.png'; //Last
4
如果您正确缩进脚本，错误就会更加明显：
<!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>

现在问题只是跨域限制。

0
为了解决跨域限制，你可以在定义pic变量之后添加这行代码：pic.crossOrigin = "Anonymous";。但在某些情况下可能无效。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接