Get pixel color from an image

Question

I have an image on a browser.

I want to get the top left pixel of the image color (at coordinates: 0,0), no matter whether the image is rotated or not.

How can I do that, using javascript or php code?

Solution 1

• Create a canvas document.createElement
• Get the 2d context canvas.getContext('2d')
• Draw the image to the canvas context.drawImage(image, x, y)
  • Make sure the image is from the same domain or you won't have access to its pixels
• Get the pixel data for the image context.getImageData(x1, y1, x2, y2)
  • You want just the top left so context.getImageData(0, 0, 1, 1)
• The result of getImageData will have an array of pixels in it's data field (context.getImageData(0,0,1,1).data)
  • The array will have r, g, b and a values.

Solution 2

For an image on a browser you can't use PHP unless you can transfer the image to a server first.

n the browser, if you can draw the image in a canvas you could use the getImageData() method:

var myImg = new Image();
myImg.src = 'image.jpg';
var context = document.getElementById('canvas').getContext('2d');
context.drawImage(myImg, 0, 0);
var data = context.getImageData(x, y, 1, 1).data;

You'd have to allow for any rotation - presumably you know what rotation has been applied.

Comments

[Eric Leschinski]

Possible dupe, how to get a pixel (x,y) from an image in javascript: stackoverflow.com/questions/8751020/…

[user]

For a PHP solution see get the first pixel from the image using php. Though it won't help you if you want an image of a rendered page and not an embedded image. As for getting a pixel color of a rendered page see the accepted answer on JavaScript eyedropper (tell color of Pixel under mouse cursor).

[Admin]

Possible duplicate of How to get a pixel's x,y coordinate color from an image?

[Eitan]

Thank you. I think you should have reward for a very fast answer. What is the case, if the browser doesn't support html5. Is there any solution in php code?

[Louis Ricci]

@Eitan - if there's no support for canvas then you'd need to pass the image (with an AJAX request) to the server to use server side code to get the pixel data or use some Flash/Silverlight abomination to handle it.

[ironic]

Another point to be careful of: pixel values rendered with drawImage may be different from values in your image because of color space correction. Good thing that this only happens if image contains color space information.

[Admin]

Canvas size has to be set to be greater than or equal to the image width. Otherwise Pixels outside the Canvas resolution will come up as black even if they are not

[Admin]

Canvas size has to be set to be greater than or equal to the image width. Otherwise Pixels outside the Canvas resolution will come up as black even if they are not

[Louis Ricci]

@DaMaxContent - the question was specifically for getting the top left pixel, but for a generic case you'd have to size the canvas appropriately or simply use the overloaded clipping parameters for 2d context's drawImage() method.

[Admin]

@LouisRicci Exactly +1. I was just being helpful. I found this question when I was trying to figure out how to get pixels that would normally be outside the canvas area, if the canvas height and width were not changed. Anywho great answer. Glad I was able to share thoughts with you, and thanks for responding this far in time after you had posted the ans.