CODEWITHSUNDEEP
javascripthtml5-canvas
Alexan-Dwer
Alexan-Dwer

Reputation: 197

How to get the color of a pixel from image?

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

Upvotes: 3

Views: 5905

Answers (3)

rjmunro
rjmunro

Reputation: 28056

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.

Upvotes: 4

jjyepez
jjyepez

Reputation: 350

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.

Upvotes: 0

user1693593
user1693593

Reputation:

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

Upvotes: 5

Related Questions