Get pixel color from an image
- 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 = '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.