On this page you will find CFML examples of ImageCR 3 in use.

The code listings are automatically formatted to fit the screen. Additionally, CFX_ImageCR attributes in the code are hyperlinked to their definitions. However, the usual link underlines were removed to improve readability.

Click the to view code in original formatting and without colors or links.

Click the to view the results of the executed code on its own page.

<cfx_imagecr3 load="#expandpath('example.jpg')#" 
              save="#expandpath('example-resaved.jpg')#" >
basic.cfm 

The result of this example is a blank page. The tag just performs the operation, it does not output any text or html.

<cfx_imagecr3 load="#expandpath('example.jpg')#" 
              save="#expandpath('example-resized.jpg')#" 
              resize="200x200" >
<cfoutput>
  <img src="example-resized.jpg">
</cfoutput>
resize.cfm 

This example... • loads example.jpg • resizes the image to 200x200 • saves as example-resized.jpg Shown to the right is the result, example-resized.jpg.

<cfx_imagecr3 load="#expandpath('example.jpg')#" 
              save="#expandpath('example-cropped.jpg')#" 
              crop="200x200" 
              anchor="center" >
<cfoutput>
  <img src="example-cropped.jpg">
</cfoutput>
crop.cfm 

This example... • loads example.jpg • crops a 200x200 pixel area from the center of the image • saves as example-cropped.jpg Shown to the right is the result, example-cropped.jpg.

<cfset dir="#ExpandPath('photos/')#">

<cfdirectory name="dirlist" directory="#dir#" filter="*.jpg">

<cfoutput query="dirlist">  
  
  <cfx_imagecr3 load="#dir##dirlist.name#" 
                save="#expandpath('thumbnails/')#" 
                resize="x100" >
  
  <a href="photos/#dirlist.name#">
    <img src="thumbnails/#imagecr.filename#" border="0"></a>
    
</cfoutput>
gallery.cfm 

Each thumbnail is 100 pixels high, and the width is calculated proportionately. ( see: resize, RectString )

Each thumbnail is displayed and links to the full size image, creating a simple gallery.

See the results »

Be sure to look at a couple of the thumbnails' filenames. They are autonamed since save is a directory.

<cfset dir="#ExpandPath('photos/')#">

<cfdirectory name="dirlist" directory="#dir#" filter="*.jpg">

<cfoutput query="dirlist">  
  
  <cfx_imagecr3 load="#dir##dirlist.name#" 
                save="#expandpath('thumbnails/')#" 
                resize="]100" 
                recrop="100" 
                anchor="center" >
  
  <a href="photos/#dirlist.name#">
    <img src="thumbnails/#imagecr.filename#" border="0"></a>
    
</cfoutput>
gallery2.cfm 

See the results »

<style>
  .centeredthumb {
    width: 100px;
    height: 100px;
    background: #f0f0f0 no-repeat center;
    border: 1px solid #c0c0c0;
  }
</style>

<cfset dir="#ExpandPath('photos/')#">

<cfdirectory name="dirlist" directory="#dir#" filter="*.jpg">

<cfoutput query="dirlist">  
    
  <cfx_imagecr3 load="#dir##dirlist.name#" 
                save="#expandpath('thumbnails/')#" 
                resize="[100" 
                recrop="100" >
  
  <!--- the next line helps keep lines short for the documentation --->
  <cfset css="background-image:url('thumbnails/#imagecr.filename#');">

  <a href="photos/#dirlist.name#">    
    <img class="centeredthumb" style="#css#" src="blank.gif" border="0"></a>
    
</cfoutput>
gallery3.cfm 

See the results »

<cfx_imagecr3 getimageinfo="#expandpath('example.jpg')#" >
<cfoutput>
  <pre>
    Width    = #imagecr.width#
    Height   = #imagecr.height#    
    DPI      = #imagecr.dpi# 
    FileSize = #imagecr.filesize#
  </pre>
</cfoutput>
getimageinfo.cfm 

<cfset bmpfile="#expandpath('efflare.bmp')#">
<cfset giffile="#expandpath('efflare.gif')#">

<cfset gotscreen="#fileexists(bmpfile)#">
<cfif not gotscreen>
  <cfx_url2bmp url="http://efflare.com" bmp="#bmpfile#">
</cfif>

<cfx_imagecr3 load="#bmpfile#" 
              save="#giffile#" 
              crop="700x700+0+8" 
              anchor="north" >

<img border="1" src="efflare.gif">
url2bmp.cfm 

Take a look at the resulting 25k gif here »

cfx_url2bmp is a free, but unsupported, tag one of our developers wrote as a proof of concept one slow weekend. You can download it from our website at http://efflare.com/download/.

This technique allows for some interesting implementations. For example, when used with something like the Simple Gallery above you could create contact sheets for groups of images. The possibilities are surprising.