admin管理员组

文章数量:1352882

I want to get the color of a pixel from image with using pure JavaScript.

I wrote this script, but it did not work:

<!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 = '.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>

How to change the code, what would he worked correctly?

For example for the picture ".png", the result should be RGB = 255, 255, 255.

I want to get the color of a pixel from image with using pure JavaScript.

I wrote this script, but it did not work:

<!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 = 'https://i.sstatic/uuFFg.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>

How to change the code, what would he worked correctly?

For example for the picture "https://i.sstatic/uuFFg.png", the result should be RGB = 255, 255, 255.

  • javascript
  • html5-canvas
Share Improve this question asked Jul 12, 2013 at 13:20 Alexan-DwerAlexan-Dwer 1971 silver badge9 bronze badges 1
  • Note: you should set the onload before setting the src. – Phrogz Commented Jul 12, 2013 at 13:24
Add a ment  | 

3 Answers 3

Reset to default 5

Your code is almost (see below) correct in its self BUT unfortunately when you use images from other origins than the page itself certain criteria must be there for it to work due to CORS (security feature).

You cannot use images from other origins out of the box. The server they are on need to have accept-* header set to allow this.

If not your getImageData and toDataURL will be blank (throws a security error that you can see in the console).

If you don't have access to modify the server the only way to get around this is to use your own server as a image proxy (http://myServer/getImage.cgi|php|aspx...?http/otherServer/img)

As pointed on in ments always set src after onload so you are sure onload gets initialized.

var pic = new Image(); 
pic.onload = function() { /* funky stuff here */ };
pic.src = 'http://i.imgur./hvGAPwJ.png'; //Last

If you indent your script properly, the error bees more apparent:

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

You are setting a function on the image's load event, but not waiting for it to happen before you update the contents of the div.

You should move everything inside the pic.onload function, apart from setting the pic.src:

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

Now the problem is just cross origin restrictions.

To solve cross origins restrictions, you may add this line:

pic.crossOrigin = "Anonymous";

Right after defining pic var.

May not work in some cases though.

本文标签： javascriptHow to get the color of a pixel from imageStack Overflow

版权声明：本文标题：javascript - How to get the color of a pixel from image? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743918494a2561647.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。