Get pixel color from an image [duplicate]
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?
- 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)
- You want just the top left so
- The result of getImageData will have an array of pixels in it’s
datafield(context.getImageData(0,0,1,1).data)- The array will have
r,g,bandavalues.
- The array will have
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="https://stackoverflow.com/questions/17789076/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.
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
