0

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.

Udit Gogoi
  • 675
  • 2
  • 11
  • 28
  • 1
    Software recommendations are as you suspected off topic on stackoverflow as they attract spam. You might want to try somewhere else like reddit. – max Nov 29 '18 at 15:49
  • When you say 'javascript', do you mean 'inside a web browser'? Is sending the image data to a server via AJAX (which will calculate the average Hue) an option? – panepeter Nov 29 '18 at 16:02
  • Ya inside the browser before sending it to server – Udit Gogoi Nov 29 '18 at 16:44

1 Answers1

1

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.

sbattou
  • 319
  • 3
  • 18
  • How to get all the RGB from the image in the first place? – Udit Gogoi Nov 29 '18 at 16:47
  • You can easily do what you want using a Canvas but since you're against it you can use Colorify.js to get the gradient/main color of your image and use that data in order to compute the average hue like I explained above. How accurate does it need to be? – sbattou Nov 29 '18 at 16:58
  • I used this answer for more help https://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript – Udit Gogoi Dec 02 '18 at 14:31