Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get pixel color from an image

Tags:

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?

like image 554
Eitan Avatar asked Jul 22 '13 13:07

Eitan


People also ask

How do you find a pixel color?

With the get() function we can read the color of any pixel in our program window. We can specify which pixel we are interested in by using x and y coordinates as parameters. For example, color mycolor = get(100, 200); would grab the color of pixel 100, 200 and put that color into the mycolor variable.

How do I find the pixel value of an image?

You can also obtain pixel value information from a figure with imshow by using the impixelinfo function. To save the pixel location and value information displayed, right-click a pixel in the image and choose the Copy pixel info option. Image Viewer copies the x- and y-coordinates and the pixel value to the clipboard.


1 Answers

  • 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.
like image 102
Louis Ricci Avatar answered Sep 28 '22 23:09

Louis Ricci