CODEWITHSUNDEEP
javascriptecmascript-6
Udit Gogoi
Udit Gogoi

Reputation: 705

How to calculate average Hue of an Uploaded Image in JavaScript without using Canvas

Ok, I have searched a lot of places for this answer and the last place for me to ask is here in S.O knowing that this question might get blocked. But I really want to know if there is any 3rd party library in JavaScript where I can calculate the average Hue of an uploaded image without using canvas. If not a library, is there any method or algorithm in JS to find out the average Hue of an Image? I have gone through some libraries like Colorify.js but not getting the required solution. There are some libraries in other languages.

Upvotes: 0

Views: 412

Answers (1)

sbattou
sbattou

Reputation: 329

Checkout @Umriyaev 's solution

  1. Convert the RGB values to the range 0-1, this can be done by dividing the value by 255 for 8-bit color depth (r,g,b - are given values): R = r / 255 = 0.09 G = g / 255 = 0.38 B = b / 255 = 0.46

  2. Find the minimum and maximum values of R, G and B.

  3. Depending on what RGB color channel is the max value. The three different formulas are: If Red is max, then Hue = (G-B)/(max-min) If Green is max, then Hue = 2.0 + (B-R)/(max-min) If Blue is max, then Hue = 4.0 + (R-G)/(max-min)

The Hue value you get needs to be multiplied by 60 to convert it to degrees on the color circle. If Hue becomes negative you need to add 360 to, because a circle has 360 degrees.

Here is full article.

Upvotes: 1

Related Questions