How to get the color of a pixel from image?

Question

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.stack.imgur.com/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.stack.imgur.com/uuFFg.png", the result should be RGB = 255, 255, 255.

Note: you should [set the `onload` before setting the `src`](http://stackoverflow.com/questions/4776670/should-setting-an-image-src-to-data-url-be-available-immediately). — Phrogz, Jul 12 '13 at 13:24

score 5 · Answer 1 · 2013-07-12T14:43:04.407

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 comments 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.com/hvGAPwJ.png'; //Last

score 4 · Accepted Answer · edited May 09 '23 at 05:39

If you indent your script properly, the error becomes 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.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>

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

Now the problem is just cross origin restrictions.

score 0 · Answer 3 · answered Feb 11 '16 at 02:50

0

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.

answered Feb 11 '16 at 02:50

jjyepez

352
3
7

How to get the color of a pixel from image?

3 Answers3