CFImage Presentation Outline

September 14, 2007
coldfusion

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 Procesing 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 HMTL 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.



Related Entries

2 people found this page useful, what do you think?

Comments

I tell you thank you for having shared this information. http://www.webtelefonkonyv.hu

Post a Comment




  



Spell Checker by Foundeo

Recent Entries



foundeo


did you hack my cf?