I gave a presentation on ColdFusion 8's CFIMAGE tag, Image Functions, and Foundeo's CFImage Effects Component yesterday to the Albany, NY CFUG.
I have made the code samples & slides available online. Feel free to use this presentation at your local CFUG, just take note of the terms of use on the aforementioned link.
CFIMAGE & Image Functions Presentation Outline
Image Processing in ColdFusion 8
- CFIMAGE has 9 different actions
- Over 50 Image functions were added to CF8
Action attribute values for CFIMAGE tag
- border - add a border to an image
- captcha - creates a captcha image (see below)
- convert - convert a jpg to a png, etc.
- info - returns a structure of image info, such as height & width
- read - reads an image and stores it in an image object variable
- resize - resizes an image to a specified height and width
- rotate - rotates an image given an angle
- write - writes an image object to a file
- writeToBrowser - serves the image dynamically using a HTML img tag.
Example: Resize an Image
<cfimage action="resize" source="sourceFile" destination="destFile" height="num" width="num">
Code Example 1: Resize an Uploaded Image
See source code download above.
Suppose you only wanted to resize big images
You need to know the height and width
Get Image Info using CFIMAGE
<cfimage action="info" source="filePath" structName="variableName"> <cfdump var="#variableName#">
Code Example 2: Image Info
See source code download above.
Code Example 3: Conditionally Resize an Image
See source code download above.
CAPTCHA Codes
Stands for: Completely Automated Public Turing test to tell Computers and Humans Apart
- Used to detect spam in web forms (blog comments or registration pages)
- Displays text in an image. Attempts to be hard for a computer to process using image to text OCR algorithms. Also hard for humans to read!
- CAPTCHA's don't meet accessibility standards
<cfimage action="captcha" text="anything" width="50" height="300">
Code Example 4: CAPTCHA Images Generated with CFIMAGE
See source code download above.
Code Example 5: CAPTCHA Form Example
This example shows how to code a form using captcha's, see the code download link above.
Image Functions in ColdFusion 8
You can do things like:
- Create Blank Images from Scratch
- Draw Shapes & Lines on an Image
- Add Text to an image
- Overlay one image on to another image, or put images side by side.
- Crop, Flip, Blur, Grayscale, Invert, Rotate, etc.
- Get EXIF & IPTC Image Metadata
Code Example 6: Build a button from scratch using Image Functions
See source code download above
But what if you wanted...
- Gradients
- Rounded Corners
- iTunes Reflection Effect
- Drop Shadows
- And More...
Then you need Foundeo's CFImage Effects!
Finished up with a demo of CFImage Effects.