3

I've been trying to figure out a solution to a problem I am having. I simply just want to get the color of a specific pixel on a JPEG in JavaScript. Is there a good way I can do this? All solutions I find online talk about manipulating a canvas, or changing the colors of a canvas element, but I simply want to find a pixel color on an image.

Thank you for any help and insight!

jsonnham
  • 31
  • 1
  • 3
  • This might help [get pixel color from an image](https://stackoverflow.com/questions/17789076/get-pixel-color-from-an-image) – erelguitars May 02 '22 at 04:51
  • Drawing the image on a canvas and then reading off the area you want is pretty standard as a pure JS way of getting the color. Is there a problem with doing that in your situation? – A Haworth May 02 '22 at 06:42

1 Answers1

2

Since you included node.js in your question tags, i'll do this in node.js rather than the browser.

You can use Jimp to get a pixel color from a JPG.

import Jimp from 'jimp';

const image = await Jimp.read('./Lenna.jpg');

console.log(Jimp.intToRGBA(image.getPixelColor(0, 0)));

You can output the color value in various formats, in the example above I used Jimp.intToRGBA to get the value { r: 226, g: 137, b: 125, a: 255 }

Which you can see in the background if you run the code snippet below.

body {
  background-color: rgba(226, 137, 125, 1)
}

It looks the same as in the top left corner of the image below:

Ryan White
  • 2,366
  • 1
  • 22
  • 34