Simple ColdFusion 8 Drop Shadow Example

This post is more than 2 years old.

I'm definitely not the first person to do this - but I've been itching to do drop shadows ever since I started playing with ColdFusion 8's new image functionality. My UDF is rather simple. It takes an image and duplicates it. It fills the canvas with white - and than adds an offset black square the same size as the original image. It does a blur, and then pastes on the original image.

That by itself isn't too interesting, but what was interesting is why I had to duplicate the original image. When I first wrote the code, I simply used imageNew. However, whenever I tried to imageOverlay the original image onto the new one, I got:

Overlay operation requires the two sources to match in number of bands and data type.

Stumped - I dumped imageInfo on both. I wasn't sure what bands meant - but colormode_type on my original image was "ComponentColorModel" ,and the value in my new image made from scratch was "PackedColorModel". That made as much sense to me as arithmetic would make to Paris Hilton. So for the heck of it, I just tried imageNew using ARGB. I figured grayscale wouldn't work. Using ARGB didn't help at all.

So does anyone know how you would make an image from scratch that would work with a (as far as I know) average JPG?

The code is pasted at the very bottom. Let me show some examples of the output. First the original image.

Writing PHP is hard!

Now to make the drop shadow:

<cfset myimage=makeShadow("sadgirl.jpg",5,5)> <cfimage action="writeToBrowser" source="#myimage#">

.Net makes Mommy and Daddy fight.

And finally an example with what I call the blood red shadow:

<cfset myimage=makeShadow("sadgirl.jpg",5,5, "90,0,0")> <cfimage action="writeToBrowser" source="#myimage#">

Rails broke all my toys and Ruby killed my dog!

And finally - the UDF. Enjoy:

<cffunction name="makeShadow" returnType="any" output="false"> <cfargument name="image" type="any" required="true"> <cfargument name="offset" type="numeric" required="true"> <cfargument name="blur" type="numeric" required="true"> <cfargument name="shadowcol" type="string" required="false" default="145,145,145"> <cfargument name="backgroundcol" type="string" required="false" default="white">
&lt;cfset var newwidth = ""&gt;
&lt;cfset var newheight = ""&gt;
&lt;cfset var shadow = ""&gt;

&lt;!--- if not image, assume path ---&gt;
&lt;cfif not isImage(arguments.image) and not isImageFile(arguments.image)&gt;
	&lt;cfthrow message="The value passed to makeShadow was not an image."&gt;

&lt;cfif isImageFile(arguments.image)&gt;
	&lt;cfset arguments.image = imageRead(arguments.image)&gt;

&lt;cfset newwidth = arguments.image.width + (2*offset)&gt;
&lt;cfset newheight = arguments.image.height + (2*offset)&gt;

&lt;!--- make a black image the same size as orig ---&gt;
&lt;cfset shadow = duplicate(arguments.image)&gt;
&lt;cfset imageResize(shadow, newwidth, newheight)&gt;
&lt;cfset imageSetDrawingColor(shadow,arguments.backgroundcol)&gt;
&lt;cfset imageDrawRect(shadow, 0, 0, newwidth, newheight, true)&gt;
&lt;cfset imageSetDrawingColor(shadow,arguments.shadowcol)&gt;
&lt;cfset imageDrawRect(shadow, arguments.offset, arguments.offset, arguments.image.width, arguments.image.height, true)&gt;

&lt;cfset imageBlur(shadow, arguments.blur)&gt;

&lt;!--- copy orig ---&gt;
&lt;cfset imagePaste(shadow,arguments.image,0,0)&gt;

&lt;cfreturn shadow&gt;


Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA