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

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

javascript html5-canvas

Javascript 如何从图像中获取像素的颜色？,javascript,html5-canvas,Javascript,Html5 Canvas,我想使用纯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.onl

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


获取像素
window.onload=函数（）{
var canvas=document.createElement（“canvas”）；
var pic=新图像（）；
pic.src=http://i.imgur.com/hvGAPwJ.png'; 
pic.onload=函数（）{
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）；
var hex=“RGB=“+p[0]+”、“+p[1]+”、“+p[2]”；
document.getElementById（“输出”）.innerHTML=hex；
}

如何更改代码，他将如何正确工作

例如，对于图片“”，结果应该是RGB=255、255、255。

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

您不能使用来自其他来源的现成图像。他们所在的服务器需要设置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

如果正确缩进脚本，错误会变得更加明显：

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


获取像素
window.onload=函数（）{
var canvas=document.createElement（“canvas”）；
var pic=新图像（）；
pic.src=http://i.imgur.com/hvGAPwJ.png'; 
pic.onload=函数（）{
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）；
var hex=“RGB=“+p[0]+”、“+p[1]+”、“+p[2]”；
document.getElementById（“输出”）.innerHTML=hex；
}

您正在对映像的加载事件设置一个函数，但在更新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>


获取像素
window.onload=函数（）{
var canvas=document.createElement（“canvas”）；
var pic=新图像（）；
pic.onload=函数（）{
canvas.width=pic.width；
canvas.height=pic.height；
var ctx=canvas.getContext（“2d”）；
ctx.绘图图像（图，0，0）；
var c=canvas.getContext（'2d'）；
var p=c.getImageData（7,7,1,1）；
var hex=“RGB=“+p[0]+”、“+p[1]+”、“+p[2]”；
document.getElementById（“输出”）.innerHTML=hex；
}
pic.src=http://i.imgur.com/hvGAPwJ.png'; 
}

现在的问题只是交叉源限制。

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

pic.crossOrigin=“匿名”
就在定义picvar之后
但在某些情况下可能不起作用。
注意：您应该这样做。