At this point the watermark is on a white background so you can't tell that it's transparent, but as you'll see, the PNG image format keeps the same transparency that we had in our Fireworks application. OK, so now what we're gonna do is read in both images and then paste the watermark onto the image of the girl with the blue eyes (Note: I'm adding a watermark for demonstration purposes, this photo isn't my property or the property of Kinky Solutions).

<!--- Read in the original image. --->
<cfset objImage = ImageRead( "./blue_eyes.jpg" ) />

<!--- Read in the Kinky Solutions watermark. --->
<cfset objWatermark = ImageNew(
     "./kinky_solutions_watermark_png32.png"
     ) />

<!---

Turn on anti-aliasing on the existing image for the pasting to render nicely.

--->
<cfset ImageSetAntialiasing(
     objImage,
     "on"
     ) />

<!---

When we paste the watermark onto the photo, we don't want it to be fully visible. So let's set the drawing transparency to 50% before we paste.

--->
<cfset ImageSetDrawingTransparency(
     objImage,
     50
     ) />

<!---

Paste the watermark on to the image. We're going to paste this into the bottom right corner.

--->
<cfset ImagePaste(
     objImage,
     objWatermark,
     (objImage.GetWidth() - objWatermark.GetWidth()),
     (objImage.GetHeight() - objWatermark.GetHeight())
     ) />

<!--- Write it to the browser. --->
<cfimage
     action="writetobrowser"
     source="#objImage#"
/>

This code displays some cool functions. After we read in the images, the first thing we do is turn on anti-aliasing for future draw actions to the primary image. Anti-aliasing gives things a slightly fuzzy look that can be more pleasing to the eye and help manipulations to appear more natural. ColdFusion 8's documentation recommends turning this on for Paste actions. I'd say that's especially true in this case where our watermark has a fuzzy edge because of the Glow affect we applied.

Whether you're setting the drawing anti-aliasing, the background color, the drawing color, or the line stroke properties, understand that you're setting these properties for a specific image, not all images. Understand too that these properties will hold true for all image manipulation actions made to that specific image unless the properties are explicitly changed.

Before we paste the watermark onto the original image, we set the drawing transparency to be 50%. This doesn't make the current image transparent; it makes all future draw actions 50% transparent when they're applied to the current image. The idea here is that not only are we using a watermark with a transparent background when we paste it into the current image, we're going to adjust its alpha channel so that some of the original image shows up through the watermark.

The paste action itself is rather simple. It takes the source image, the target image, and the x and y coordinates of where to paste the target image. The target image (second argument) is always pasted onto the source image (first argument). The x and y coordinates are just like a web page - they start at the top left (0,0) and increase going down and to the right.

When I paste in the watermark, I'm using both the dimensions of the source and target images to calculate the x and y coordinates of the paste. Notice that I'm using .GetWidth() and .GetHeight() actions. These are the undocumented underlying Java methods available to the ColdFusion image object. If you're not comfortable, you can replace these with the more verbose ImageGetWidth() and ImageGetHeight() ColdFusion 8 methods. Running the code above, we get a really nice Kinky Solutions watermark affect:

Pretty slick. There's some graininess around the watermark, but in all fairness the glow effect plus the transparency plus the JPG optimization is just a bad combination for small file sizes. If I had exported this image as a PNG rather than a JPG, the quality would have been higher. So much of image manipulation magic is finding the right balance between quality and image size. You want things to look sweet, but you don't want a 100KB image that has no compression.