CFIMAGE

Presentation By Pete Freitag

Foundeo Inc.

1
Image Processing in CF8

• New CFIMAGE tag supports 9 operations

• Over 50 new image processing functions
added to CF8

2
 CFIMAGE Action’s
• border

• captcha

• convert

• info

• read

• resize

• rotate

• write

• writeToBrowser

3
Example: Resize
<cfimage action=”resize”
source=”filePath”
destination=”filePath”
height=”n”
width=”n”>

4
 Example 1
Resize an Uploaded Image

5
 What if...

• You only wanted to resize big images?

6
 Image Info

• <cfimage action=”info” source=”file”

structName=”imgInfo”>

7
Example 2:
Image Info

8
 Example 3:
Conditionally Resize an Image.

9
 CAPTCHA

• Whatcha talkin about?

• Completely Automated Public Turing
test to tell Computers and Humans
Apart.

10
 CAPTCHA’s

• Used to detect spammers

• Displays hard to read text via an image
• To foil OCR or image to text apps
• CAPTCHA’s do not meet Section 508
Accessibility standards

11
CFIMAGE CAPTCHAs

• <cfimage action=”captcha” text=”display”

width=”50” height=”300”>

12
 Example 4:
CAPTCHA Images generated by CFIMAGE

13
Example 5:
CAPTCHA Form Example

14
 Image Functions
• Create Images from Scratch
• Add Shapes & Lines to an image
• Add Text to an Image
• Overlay an Image on another Image
• Crop, Flip, Blur, Grayscale, Invert, Rotate
• Get EXIF & IPTC Image Metadata

15
 Example 6:
Building a button from scratch using Image functions.

16
 What if you wanted...

• Gradients
• Rounded Corners
• Reflection Effect
• Drop Shadows
• More...

17
 Foundeo’s CFIMAGE
Effects

http://foundeo.com/image-effects/

18
 Example 7:
Foundeo’s CFIMAGE Effects

19
 Questions?
Thank You.

Blog: http://www.petefreitag.com
Company: http://foundeo.com/

20