Application examples that use ColdFusion images



You can create simple applications that automate image processes by using ColdFusion images.

Generating thumbnail images

The following example shows how to create a form for uploading images. A visitor to the site can use the form to upload an image file and generate a thumbnail image from it. You use ColdFusion image operations to perform the following tasks:

  • Verify that the uploaded file is a valid image.

  • Ensure that the height or the width of the image does not exceed 800 pixels.

  • If the image is valid and within the size limits, generate a thumbnail version of the source image and save it to a file.

Enter the following code on the form page:

<!--- This code creates a form with one field where the user enters the image file to upload. ---> 
<cfform action="makeThumbnail.cfm" method="post" enctype="multipart/form-data"> 
Please upload an image: <cfinput type="file" name="image"> 
<cfinput type="submit" value="Send Image" name="Submit"> 
</cfform>

Enter the following code on the action page:

<cfset thisDir = expandPath(".")> 
<!--- Determine whether the form is uploaded with the image. ---> 
<cfif structKeyExists(form,"image") and len(trim(form.image))> 
    <!--- Use the cffile tag to upload the image file. ---> 
    <cffile action="upload" fileField="image" destination="#thisDir#" result="fileUpload" 
        nameconflict="overwrite"> 
    <!--- Determine whether the image file is saved. ---> 
    <cfif fileUpload.fileWasSaved> 
    <!--- Determine whether the saved file is a valid image file. ---> 
        <cfif IsImageFile("#fileUpload.serverfile#")> 
    <!--- Read the image file into a variable called myImage. ---> 
            <cfimage action="read" source="#fileUpload.serverfile#" name="myImage"> 
            <!--- Determine whether the image file exceeds the size limits. ---> 
            <cfif ImageGetHeight(myImage) gt 800 or ImageGetWidth(myImage) gt 800> 
                <!--- If the file is too large, delete it from the server. ---> 
                <cffile action="delete" 
                    file="#fileUpload.serverDirectory#/#fileUpload.serverFile#"> 
                <cfoutput> 
                <p> 
                The image you uploaded was too large. It must be less than 800 pixels wide 
                    and 800 pixels high. Your image was #imageGetWidth(myImage)# pixels wide 
                    and #imageGetHeight(myImage)# pixels high. 
                </p> 
                </cfoutput> 
                <!--- If the image is valid and does not exceed the size limits, 
                    create a thumbnail image from the source file that is 75-pixels 
                    square, while maintaining the aspect ratio of the source image.  
                    Use the bilinear interpolation method to improve performance. 
                    ---> 
            <cfelse> 
 
    <cfset ImageScaleToFit(myImage,75,75,"bilinear")> 
                <!--- Specify the new filename as the source filename with 
                    "_thumbnail" appended to it. ---> 
                <cfset newImageName = fileUpload.serverDirectory & "/" & 
                    fileUpload.serverFilename & "_thumbnail." & 
                    fileUpload.serverFileExt> 
                <!--- Save the thumbnail image to a file with the new filename. ---> 
                <cfimage source="#myImage#" action="write" 
                    destination="#newImageName#" overwrite="yes"> 
                <cfoutput> 
                <p> 
                Thank you for uploading the image. We have created a thumbnail for 
                    your picture. 
                </p> 
                <p> 
                <!--- Display the thumbnail image. ---> 
                <img src="#getFileFromPath(newImageName)#"> 
                </p> 
                </cfoutput>     
            </cfif> 
        <!--- If it is not a valid image file, delete it from the server. ---> 
        <cfelse> 
            <cffile action="delete" 
                file="#fileUpload.serverDirectory#/#fileUpload.serverFile#"> 
            <cfoutput> 
            <p> 
            The file you uploaded, #fileUpload.clientFile#, was not a valid image. 
            </p> 
            </cfoutput> 
        </cfif> 
    </cfif> 
</cfif>

Generating a gallery of watermarked images

The following example extracts images and information from the cfartgallery database. You use ColdFusion image operations to perform the following tasks:

  • Verify that an image exists for records returned from the database.

  • Display the text, SOLD! on images that have been sold.

  • Resize images to 100 pixels, maintaining the aspect ratio of the source image.

  • Add a 5-pixel border to the images.

  • Display the modified images directly in the browser without writing them to files.

Example

<!--- Create a query to extract artwork and associated information from the cfartgallery database. ---> 
<cfquery name="artwork" datasource="cfartgallery"> 
SELECT FIRSTNAME, LASTNAME, ARTNAME, DESCRIPTION, PRICE, LARGEIMAGE, ISSOLD, MEDIATYPE 
FROM ARTISTS, ART, MEDIA 
WHERE ARTISTS.ARTISTID = ART.ARTISTID 
AND ART.MEDIAID = MEDIA.MEDIAID 
ORDER BY ARTNAME 
</cfquery> 
<cfset xctr = 1> 
<table border="0" cellpadding="15" cellspacing="0" bgcolor="#FFFFFF"> 
<cfoutput query="artwork"> 
    <cfif xctr mod 3 eq 1> 
    <tr> 
        </cfif> 
        <!--- Use the IsImageFile function to verify that the image files extracted 
            from thedatabase are valid. Use the ImageNew function to create a 
            ColdFusion image fromvalid image files. ---> 
        <cfif IsImageFile("../cfdocs/images/artgallery/#artwork.largeImage#")> 
        <cfset myImage=ImageNew("../cfdocs/images/artgallery/#artwork.largeImage#")> 
            <td valign="top" align="center" width="200"> 
            <cfset xctr = xctr + 1> 
            <!--- For artwork that has been sold, display the text string "SOLD!" 
                in white on the image. ---> 
                    <cfif artwork.isSold> 
                        <cfset ImageSetDrawingColor(myImage,"white")> 
                            <cfset attr=StructNew()> 
                            <cfset attr.size=45> 
                            <cfset attr.style="bold"> 
                            <cfset ImageDrawText(myImage,"SOLD!",35,195, attr)> 
                            </cfif> 
        <!--- Resize myImage to fit in a 110-pixel square, scaled proportionately. ---> 
        <cfset ImageScaleToFit(myImage,110,"","bicubic")> 
        <!--- Add a 5-pixel black border around the images. (Black is the default color. ---> 
        <!--- Add a 5-pixel black border to myImage. ---> 
        <cfset ImageAddBorder(myImage,"5")> 
        <!--- Write the images directly to the browser without saving them to the hard drive. 
            ---> 
        <cfimage source="#myImage#" action="writeToBrowser"><br> 
            <strong>#artwork.artName#</strong><br> 
            Artist: #artwork.firstName# #artwork.lastName#<br> 
            Price: #dollarFormat(artwork.price)#<br> 
            #artwork.mediaType# - #artwork.description#<br> 
            </td> 
        </cfif> 
        <cfif xctr-1 mod 3 eq 0> 
            </tr> 
        </cfif> 
</cfoutput> 
</table>

Using CAPTCHA to verify membership

The following example shows how to create a simple form to verify whether a person (rather than a computer generating spam) is registering to receive an online newsletter. You generate the CAPTCHA image from a random text string on the form page and verify the response on the action page.

Example

Enter the following code on the form page:

<!--- Set the length of the text string for the CAPTCHA image. ---> 
<cfset stringLength=6> 
<!--- Specify the list of characters used for the random text string. The following list 
    limits the confusion between upper- and lowercase letters as well as between numbers and 
    letters. ---> 
<cfset 
    stringList="2,3,4,5,6,7,8,9,a,b,d,e,f,g,h,j,n,q,r,t,y,A,B,C,D,E,F,G,H,K,L,M,N,P,Q,R,S, 
    T,U,V,W,X,Y,Z"> 
<cfset rndString=""> 
<!--- Create a loop that builds the string from the random characters. ---> 
<cfloop from="1" to="#stringLength#" index="i"> 
    <cfset rndNum=RandRange(1,listLen(stringList))> 
    <cfset rndString=rndString & listGetAt(stringList,rndNum)> 
</cfloop> 
<!--- Hash the random string. ---> 
<cfset rndHash=Hash(rndString)> 
 
<!--- Create the user entry form. ---> 
<cfform action="captcha2.cfm" method="post"> 
<p>Please enter your first name:</p> 
<cfinput type="text" name="firstName" required="yes"> 
<p>Please enter your last name:</p> 
<cfinput type="text" name="lastName" required="yes"> 
<p>Please enter your e-mail address:</p> 
<cfinput type="text" name="mailTo" required="yes" validate="email"> 
<!--- Use the randomly generated text string for the CAPTCHA image. ---> 
<p><cfimage action="captcha" fontSize="24" fonts="Times New Roman" width="200" height="50" 
    text="#rndString#"></p> 
<p>Please type what you see: </p> 
<p><cfinput type="text" name="userInput" required="yes" maxlength=6> 
<cfinput type="hidden" name="hashVal" value="#rndHash#"> 
<p><cfinput type="Submit" name ="OK" value="OK"></p> 
</cfform>

Enter the following code on the action page:

<!--- Verify whether the text entered by the user matches the CAPTCHA string. ---> 
<cfif #form.hashval# eq Hash(#form.userInput#)> 
    <cfoutput> 
    <p> 
    Thank you for registering for our online newsletter, #form.firstName# #form.lastName#. 
    </p> 
    <p> 
    A notification has been sent to your e-mail address: #form.mailTo#. 
    </p> 
        <cfmail from="newsletter@domain.com" to="#form.mailTo#" subject="Newsletter"> 
        Thank you for your interest in our Newsletter. 
        </cfmail> 
    </cfoutput> 
<cfelse> 
    <p>I'm sorry; please try again.</p> 
</cfif>

Creating versions of an image

The following example shows how to create an application that lets you generate four versions of the same image, display the versions in a form, and choose which one to save. The application comprises three ColdFusion pages that perform the following tasks:

  • Dynamically populate a drop-down list box from a database query.

  • Use the cfimage tag to create a ColdFusion image from the title selected from the list. Use the ImageNew function to create three clones of the ColdFusion image. Use the ImageSharpen function to change the sharpness setting for each clone.

  • Save the file chosen from the form to a new location.

Example

On the first form page, create a query that selects the artwork from the cfartgallery database and displays the titles in a pop-up menu:

<!--- Create a query to extract artwork from the cfartgallery database. ---> 
<cfquery name="artwork" datasource="cfartgallery"> 
SELECT ARTID, ARTNAME, LARGEIMAGE 
FROM ART 
ORDER BY ARTNAME 
</cfquery> 
 
<!--- Create a form that lists the artwork titles generated by the query. Set the value to 
    LARGEIMAGE so that the image file is passed to the action page. ---> 
<cfform action="dupImage2.cfm" method="post"> 
<p>Please choose a title:</p> 
<cfselect name="art" query="artwork" display="ARTNAME" value="LARGEIMAGE" required="yes" 
    multiple="no" size="8"> 
</cfselect> 
<br/><cfinput type="submit" name="submit" value="OK"> 
</cfform>

On the first action page, clone the original image three times, change the sharpness setting for each clone, and display the results:

<!--- Determine whether a valid image file exists. ---> 
<cfif IsImageFile("../cfdocs/images/artgallery/#form.art#")> 
    <cfset original=ImageNew("../cfdocs/images/artgallery/#form.art#")> 
    <!--- Use the ImageNew function to create a clone of the ColdFusion image. ---> 
    <cfset clone1=ImageNew(original)> 
    <!--- Use the ImageSharpen function to blur the cloned image. ---> 
    <cfset ImageSharpen(clone1,-1)> 
    <!--- Use the ImageNew function to create a second clone of the original image. ---> 
    <cfset clone2=ImageNew(original)> 
    <!--- Use the ImageSharpen function to sharpen the cloned image. ---> 
    <cfset ImageSharpen(clone2,1)> 
    <!--- Use the ImageNew function to create a third clone for the original image. ---> 
    <cfset clone3=ImageNew(original)> 
    <!--- Use the ImageSharpen function to sharpen the cloned image to the maximum setting. 
        ---> 
    <cfset ImageSharpen(clone3,2)> 
<!--- Create a form with a radio button for each selection. The value of the hidden field 
    is the relative path of the original image file. ---> 
<p>Please choose an image:</p> 
<table> 
    <tr> 
    <cfform action="dupImage3.cfm" method="post"> 
        <td><cfimage source="#original#" action="writeToBrowser"><br /> 
        <cfinput type="radio" name="foo" value="original">Original Image</td> 
        <td><cfimage source="#clone1#" action="writeToBrowser"><br /> 
        <cfinput type="radio" name="foo" value="blurred">Blurred Image</td> 
        <td><cfimage source="#clone2#" action="writeToBrowser"><br /> 
        <cfinput type="radio" name="foo" value="sharper">Sharper Image</td> 
        <td><cfimage source="#clone3#" action="writeToBrowser"><br /> 
        <cfinput type="radio" name="foo" value="sharpest">Sharpest Image</td> 
        <tr><td><cfinput type="Submit" name="OK" value="OK"> 
        <cfinput type="hidden" name="orig_file" 
            value="../cfdocs/images/artgallery/#form.art#"> 
        </td></tr> 
    </cfform> 
    </tr> 
</table> 
<cfelse> 
    <p>There is no image associated with the title you selected. Please click the Back button 
        and try again.</p> 
</cfif>

On the second action page, save the selected image to the C drive:

<p>The image you have chosen has been saved.</p> 
<cfset img=ImageNew("#form.orig_file#")> 
<cfswitch expression=#form.foo#> 
    <cfcase value="blurred"> 
        <cfset ImageSharpen(img,-1)> 
    </cfcase> 
    <cfcase value="sharper"> 
        <cfset ImageSharpen(img,1)> 
    </cfcase> 
    <cfcase value="sharpest"> 
        <cfset ImageSharpen(img,2)> 
    </cfcase>     
</cfswitch> 
 
<!--- Use the cfimage tag to write the image selected from the form to a file in the C drive. 
    Use the value of the hidden field as the source file for the image. ---> 
<cfimage source="#img#" action="write" destination="c:/myImage.jpg" overwrite="yes"> 
<img src="c:/myImage.jpg" />