ColdFusion 8: Watermarks, Transparency & Resizing


I wanted to share some code examples that I have come across within the past few weeks regarding the new functionality in ColdFusion 8. My first example will be using the following functions: ImageRead(), ImageSetAntialiasing(), ImageScaleToFit(), ImageSetDrawingTransparency(), ImageGetWidth(), ImageGetHeight(), and finally ImagePaste(). Ok, here we go...

First I have a basic form that will upload an image file to the server:

File:

Once the form is submitted, the fun begins. I first set some default variables that I will be using in the code. Then i save the uploaded file to a processing directory. I do this to keep my pre-processed images separate from my regular image directory, just in case something errors out. I don't want unwanted images in the images directory.

<!--- save image to process dir --->

Next, I check if the file was uploaded successfully and also if the file uploaded is an image file. If its not, I will delete it.

<!--- if file uploaded was saved, move on --->


<!--- if file uploaded is an image, move on --->

I then create usable objects out of my uploaded image and watermark image so they are easier to use. Then I turn on Antialiasing on the uploaded image. Antialiasing is a technique used to soften jagged edges. It will make my processed image look its best at the end.

<!--- read the original image --->


<!--- read the watermark image --->


<!--- turn on antialiasing on the existing image for the pasting to render nicely --->

Next, I resize my uploaded image so that its width and height aren't greater than 300 pixels.

<!--- resize image if width greater than 300px or height greater than 300px --->

I then set a drawing transparency of 50% on the uploaded image. This means that whatever I draw over the image will have a transparency of 50%. I also set the x and y coordinates where I want my watermark to lay on my uploaded image. In this case I calculate the center of my image and set the watermark there.

<!--- set drawing transparency to 50% before we add the watermark --->


<!--- set x and y coordinates of watermark --->

And here is where the magic happens. I now add my watermark to the uploaded image. I also write my new processed file to disk in its proper images directory and clean up my process directory.

<!--- add watermark --->


<!--- write file to disk --->


<!--- clean up process directory --->

Then I can display my new image.

<!--- display image --->
<img src="/images/#fileUpload.serverFile#" alt="" />

Here is all my code without breaks:

ColdFusion 8: Image Watermark Example

 

File:

 

You can see a working demo of it here: http://labs.dcfusion.com/image-test/watermark.cfm. Let me know what you think!

 

No comments yet.

(will not be published)
Leave this field empty: