Question

57

How can I use JavaScript or jQuery to read a pixel of an image when user clicks it?

rated 0 times [ 62] [ 5] / answers: 1 / hits: 38952 / 15 Years ago, wed, june 24, 2009, 12:00:00

How can I use JavaScript or jQuery to read the color of a pixel of an image when the user clicks on it? (of course we have the (x,y) value of this pixel by subscribing to the click event).

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

grayson

Add To Favorites

Follow

Total Points: 36

Total Questions: 113

Total Answers: 95

Location: Tonga

Member since Fri, Aug 21, 2020

4 Years ago

grayson questions

1 js error : 'createObjectURL' on 'URL': Overload resolution failed.

Sat, Mar 26, 22, 00:00, 2 Years ago

1 Play/Pause video onScroll in Reactjs

Mon, Sep 14, 20, 00:00, 4 Years ago

1 React Hook useContext is called in function age which is neither a React function component or a custom React Hook function

Mon, Feb 3, 20, 00:00, 4 Years ago

1 Adding Square Brackets to JSON-Object

Fri, Feb 22, 19, 00:00, 5 Years ago

1 React: set State or set Prop without a Rerender

Sat, Feb 9, 19, 00:00, 5 Years ago

View All

answered 15 Years ago nikoguym · Accepted Answer

If you can draw the image in a canvas element then you can use the getImageData method to return an array containing RGBA values.

var img = new Image();

img.src = 'image.jpg';

var context = document.getElementById('canvas').getContext('2d');

context.drawImage(img, 0, 0);

data = context.getImageData(x, y, 1, 1).data;