Getting the color of a pixel on an image

Question

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!

Answer 1

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: