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.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay