DEV Community

James Moberg
James Moberg

Posted on

1 2

Generating Color Palette Using ColdFusion & ImageMagick

I read Ben Nadel's recent ColdFusion post on Exploring Color Histograms In GraphicsMagick And Lucee CFML 5.2.9.31 and thought I'd compare it with ImageMagick.

ImageMagick returns a list of color data in a low-to-high order. I used ReMatch to identify the hex colors via regex, generated an array and then reversed it.

NOTE: I wanted to compare performance using Ben's script, but his "Lucee CFML" script wasn't written to be compatible with ColdFusion 2016. :(

Usage

colors = extractPalette(imagePath, numberOfColors);
Enter fullscreen mode Exit fullscreen mode

Source Code

<!--- 20200311 Extract Color Palette using ColdFusion and ImageMagick
USAGE: extractPalette(filepath, numberOfColors)
GIST: https://gist.github.com/JamoCA/d2814588b6f518c72713becb3625c5bb
BLOG: https://dev.to/gamesover/generating-color-palette-using-coldfusion-imagemagick-25bp
--->
<cffunction name="extractPalette" returntype="array" output="no">
<cfargument name="filepath" type="string" required="true">
<cfargument name="numberOfColors" type="numeric" default="5" required="true">
<cfargument name="EXEpath" default="c:\ImageMagick\convert.exe" type="string" required="true">
<cfset var Temp = {raw="", response=[]}>
<cfexecute name="#arguments.EXEpath#" arguments="#arguments.filepath# -resize 300x +dither -colors #VAL(Arguments.numberOfColors)# -define histogram:unique-colors=true -format ""%c"" histogram:info:" variable="Temp.Raw" timeout="5"></cfexecute>
<cfscript>
Temp.Colors = ReMatch("##([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})", Temp.Raw);
for (Temp.color in Temp.Colors){
for (temp.i=ArrayLen(Temp.Colors); temp.i GT 0; temp.i=temp.i-1){
if (arrayLen(temp.response) GTE arguments.numberOfColors){break;}
arrayAppend(temp.response, Temp.Colors[temp.i]);
}
}
</cfscript>
<cfreturn Temp.response>
</cffunction>
<cfset timeStart = GetTickCount()>
<cfset Colors = extractPalette(imagePath, 5)>
<cfoutput>
<div><b>Time:</b> #NumberFormat(GetTickCount()-TimeStart)#ms</div>
<cfloop array="#Colors#" index="thisColor">
<div><span style="background-color:#ThisColor#; min-width:50px; display:inline-block;">&nbsp;</span> #thisColor#</div>
</cfloop>
</cfoutput>

Top comments (1)

Collapse
 
bennadel profile image
Ben Nadel

I came across some similar things in various ImageMagick forums when I was looking into this. I wonder if the -define histogram:unique-colors=true is part of why I am not getting results that I love. GraphicsMagick doesn't seem to have an equivalent setting.

On various color palette posts, I did see that some people were calculating the "distance" between colors to help figure out a palette. But, I am not so good at maths ... or understanding color theory :D Part of me is like, let me just show the top 30 colors and let the user pick out whatever they like.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay