23

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?

Eric Leschinski
  • 146,994
  • 96
  • 417
  • 335
Eitan
  • 1,286
  • 2
  • 16
  • 55
  • For a PHP solution see [get the first pixel from the image using php](http://stackoverflow.com/questions/14178182/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)](http://stackoverflow.com/questions/1936021/javascript-eyedropper-tell-color-of-pixel-under-mouse-cursor). – user Mar 22 '14 at 14:34

2 Answers2

50
  • 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.
Jack Wilsdon
  • 6,706
  • 11
  • 44
  • 87
Louis Ricci
  • 20,804
  • 5
  • 48
  • 62
  • 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? – Eitan Jul 22 '13 at 13:55
  • 2
    @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. – Louis Ricci Jul 22 '13 at 13:57
  • 2
    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. – ironic Aug 13 '14 at 08:07
  • 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 –  Sep 13 '17 at 18:00
  • 1
    @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. – Louis Ricci Sep 15 '17 at 12:13
  • @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. –  Sep 22 '17 at 18:06
18

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.

manzapanza
  • 6,087
  • 4
  • 39
  • 48
  • 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 –  Sep 13 '17 at 18:05