DEV Community

Cover image for Extracting a color palette from an image with javascript

Extracting a color palette from an image with javascript

Zygimantas Sniurevicius on March 23, 2022

Introduction Today I am bring you something really interesting that I think is worth sharing. Let me begin by showcasing the end result....
Collapse
 
pzh20 profile image
Pete Harrison

I'm trying to work out how to return the number of occurrences of each returned colour as well as the sorted value. I can't quite see how to do it when using recursive algorithms. Can anyone suggest a possibility?

Many thanks

Collapse
 
tr11 profile image
Tiago Rangel

very helpful! If only the function was faster :)

Collapse
 
devvsakib profile image
Sakib Ahmed

Amazing tutorial

Collapse
 
undead34 profile image
Gabriel Maizo

How well explained, thank you.

Collapse
 
youssefa9 profile image
Youssef Ahmed

Would you suggest to process the image at the client side or the server side

Collapse
 
zygiss22 profile image
Zygimantas Sniurevicius

Its something you should want to have separated from your main services since its really heavy in the processing, it can take a while, for small tests like the one I did here it doesn't matter but for bigger apps take it into consideration.

if you try to use it with higher resolution images it will take several seconds, during that time your client will be blocked.

Cheers

Collapse
 
dannyc123 profile image
Danny Cummings

Cover art from Music Albums tends to come in 300x300 max size. So I think this was intended for smaller image sizes.

Thinking outloud...
Larger images, perhaps user interaction should initiate the action to process the image to extract a palette for a specific purpose. If not in a flow of user interaction, I would question why the image needs to be so large. You could show the user a large image and process the palette from the same image, scaled down significantly, in the background. If you need something to automagically happen based on the user seeing a rather large image, with performance. IDK, just a thought, unless there is a faster way to retrieve the palette from an image. I am always about performance, even if just for 300x300 images in my scenario :)

Collapse
 
viktor1953 profile image
Viktor1953

Great job! Thank you very much!

Collapse
 
capscode profile image
capscode

Amazing article.
Thank you for this.

Collapse
 
quocbahuynh profile image
quocbahuynh

very helpful <3

Collapse
 
geraldo916 profile image
Geraldo Munhika

Thank you for sharing this. That's will help me finish my project.

Collapse
 
iceflower profile image
Iceflower • Edited

There is a small issue.

rgbValues.length === 0

You still return RGB(0, 0, 0) as average, even if there was no color. I think it is better to return an empty array in that case.

Collapse
 
dannyc123 profile image
Danny Cummings

Thanks for posting this. This will help me do similar w/ cover art driving the color palette of the page and animations on the page, real time, as songs change.