As a web developer, there comes a time where we all encounter situations where we need to do something to or with an image. I spent quite sometime researching different options available for image manipulation and ran across a CFC that was created by Rick Root, http://www.opensourcecf.com/imagecfc/. I immediately started using this and converted older projects that I worked on before from CFX_Image/CFX_OpenImage to image.cfc. Since CF is created on top of Java, this CFC would easily integrate with any application.

I created several example files that demonstrated different uses for this component, here they are:

Form Submission Using Image Verification

I did not go too much into detail on the creation of the form. I am just simply demonstrating how you can create dynamic images that you can use to verify the form being submitted. You will have to on your form handler make sure to check the entered text against the random verification code however you see fit for your application for verification purposes.

form.cfm:

<!--- Generate a couple of random numbers --->
<cfset randNums1 = RandRange(1000,9999)>
<cfset randNums2 = RandRange(1000,9999)>
<!--- List of Alphas we will use --->
<cfset alphas = "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z">
<!--- Generate random numbers for different list element positions --->
<cfset randChar1 = RandRange(1,26)>
<cfset randChar2 = RandRange(1,26)>
<!--- Now we will store the random Alphas in vars --->
<cfset randAlpha1 = ListGetAt(alphas,randChar1,',')>
<cfset randAlpha2 = ListGetAt(alphas,randChar2,
',')>
<!--- Create a string with your rand numbers and rand Alphas --->
<cfset finalVerify = "#randAlpha1#-#randNums1#-#randAlpha2#-#randNums2#">
<!--- Invoke image.cfc component --->
<cfset imageCFC = createObject("component","image") />
<!--- This struct is necessary to add the text to the image, make sure the correct path to the fontfile is used otherwise it won't work --->
<cfset fontDetails = StructNew()>
<cfset fontDetails.fontfile =
"#ExpandPath(".")#/fonts/framd.ttf">
<cfset fontDetails.color =
"maroon">
<cfset fontDetails.size = 18>
<!---
    1st arg is for passing an image object, which we are not doing here
    2nd arg is to pass the image and location to the CFC
    3rd arg is the new image with the text placed on top of it
    4th arg is the position of the text on the image from left to right
    5th arg is the position from the top
    6th arg is the fontDetails struct from above
    7th arg is the text to add
--->
<cfset imgAddText = imageCFC.addtext("", "#ExpandPath(".")#/Images/bgdigits.jpg", "#ExpandPath(".")#/Images/bgdigits2.jpg", 1, 0, fontDetails, "#finalVerify#")>
<html>
   <head>
      <title>
Image Verification(For Form Submissions)</title>
   </head>
   <body>

   <form action="form.cfm" method="post">
      First Name: <input type="text" name="fName" /><br />
      Last Name: <input type="text" name="lName" /><br />
      
<img src="images/bgdigits2.jpg"><br />
      <input type="text" name="finalVerify" />
      <input type="submit" value="Submit Info" />
   </form>
   </body>
</html>

You can do many things at this point like: random backgrounds, random fonts, etc… I wanted to keep it simple enough to understand and enough to get you started.

Scaling Uploaded Images Down

This operation can be useful if you have the need for creating thumbnails, reducing image sizes, dynamic image galleries, etc… You can create an upload form for your visitors to upload photos, images, etc… and dynamically reduce the size. Here is a quick example of how this is done.

scaling.cfm:

<html>
   <head>
      <title>
Scaling Images</title>
   </head>

   <body>
   <cfif not isDefined("FORM.imageFile")>
 
     <form action="scaling.cfm" method="post" enctype="multipart/form-data">
         <input type=
"file" name="imageFile" /><br />
         <input type="submit" value="PROCESS IMAGE" />
      </form>
   <cfelse>
      <cfset myfilepath= getDirectoryFromPath( getTemplatePath() ) >
      <cffile action=
"upload"
                  filefield=
"imageFile"
                  destination=
"#myfilepath#Images"
                  nameconflict=
"overwrite">
      <cfset uploadedImage = cffile.serverfile>
 
     <!--- Invoke image.cfc component --->
 
     <cfset imageCFC = createObject("component","image") />

      <!--- scaleX image to 150px wide --->
 
     <cfset scaleX150 = imageCFC.scaleX("", "#myfilepath#\Images\#uploadedImage#", "#myfilepath#\Images\_scaleX_150_#uploadedImage#", 150)>
   </cfif>
 
  </body>
</html>

Scale Down Image and Place Watermark

In this example, I am scaling down the image and adding a watermark on top of it. My graphics skills are not the best, please excuse my sold.jpg graphic! Here I am scaling the uploaded image file down and adding a watermark to it.

watermark.cfm

<html>
   <head>
      <title>
Scaling Images</title>
   </head>

   <body>
   <cfif not isDefined("FORM.imageFile")>
      <form action="waterMark.cfm" method="post" enctype="multipart/form-data">
         <input type=
"file" name="imageFile" /><br />
         <input type="submit" value="PROCESS IMAGE" />
      </form>
   <cfelse>
      <cfset myfilepath= getDirectoryFromPath( getTemplatePath() )>
      <cffile action=
"upload"
                  filefield=
"imageFile"
                  destination=
"#myfilepath#Images"
                  nameconflict=
"overwrite">
      <cfset uploadedImage = cffile.serverfile>
      <!--- Invoke image.cfc component --->
      <cfset imageCFC = createObject("component","image") />

      <!--- scaleX image to 640px wide and add watermark --->
      <cfset scaleX640 = imageCFC.scaleX("", "#myfilepath#\Images\#uploadedImage#", "", 640)>
      <cfset scaleX640_2_watermark = imageCFC.watermark(scaleX640.img,
"" ,"","#myfilepath#\Images\sold.jpg",0.5,50, 50,"#myfilepath#\Images\_scaleX_640_waterMarked_#uploadedImage#")>
   </cfif>
   </body>
</html>

Adding Text To Image

Maybe you don’t want to watermark your images. Maybe you just want to simply add text to the image or add www.yoursite.com to the image. Here in this example, the image is scaled down and the text “Sample Text” is added to the newly created image.

addText.cfm:

<html>
   <head>
      <title>
Scaling Images</title>
   </head>

   <body>
   <cfif not isDefined("FORM.imageFile")>
      <form action="addText.cfm" method="post" enctype="multipart/form-data">
         <input type=
"file" name="imageFile" /><br />
         <input type="submit" value="PROCESS IMAGE" />
      </form>
   <cfelse>
      <cfset myfilepath= getDirectoryFromPath( getTemplatePath() ) >
      <cffile action=
"upload"
                  filefield=
"imageFile"
                  destination=
"#myfilepath#Images"
                  nameconflict=
"overwrite">
      <cfset uploadedImage = cffile.serverfile>
      <!--- Invoke image.cfc component --->
      <cfset imageCFC = createObject("component","image") />

      <!--- scaleX image to 150px wide and add text --->
      <cfset scaleX150 = imageCFC.scaleX("", "#myfilepath#\Images\#uploadedImage#", "", 150)>
      <cfset fontDetails =
StructNew()>
      <cfset fontDetails.fontfile =
"#myfilepath#\fonts\framd.ttf">
      <cfset fontDetails.color =
"white">
      <cfset fontDetails.size = 10>
      <!--- Take the scaleX 150 image and add text to it --->
      <!--- The 2nd argument which is the input file will not be used --->
      <!--- The 1st argument we will use to pass the image object to (to add text) --->
      <cfset scaleX150_2 = imageCFC.addtext(scaleX150.img, "", "#myfilepath#\Images\_scaleX_150_marked_#uploadedImage#", 5, 5, fontDetails, "Sample Text")>
   </cfif>
   </body>
</html>

Multiple Operations

Sometimes to get the job done, we need to perform multiple operations to the same image. In this example, I showed quite a few operations on the same image outputting 8 different images in under 3 and ½ seconds, it doesn’t get much faster than that!

multipleOperations.cfm:

<html>
   <head>
      <title>
Performing Multiple Operations On Uploaded Images</title>
   </head>
   <body>

   <cfif not isDefined("FORM.imageFile")>
      <form action="multipleOperations.cfm" method="post" enctype="multipart/form-data">
         <input type=
"file" name="imageFile" /><br />
         <input type="submit" value="PROCESS IMAGE" />
      </form>
   <cfelse>
      <cfset myfilepath= getDirectoryFromPath( getTemplatePath() ) >
      <cffile action=
"upload"
                  filefield=
"imageFile"
                  destination=
"#myfilepath#Images"
                  nameconflict=
"overwrite">
      <cfset uploadedImage = cffile.serverfile>

      <!--- Invoke image.cfc component --->
      <cfset imageCFC = createObject("component","image") />

      <!--- scaleX image to 150px wide --->
      <cfset scaleX150 = imageCFC.scaleX("", "#myfilepath#\Images\#uploadedImage#", "", 150)>
      <cfset fontDetails =
StructNew()>
      <cfset fontDetails.fontfile =
"#myfilepath#\fonts\framd.ttf">
      <cfset fontDetails.color =
"white">
      <cfset fontDetails.size = 10>
      <!--- Take the scaleX 150 image and add text to it --->
      <!--- The 2nd argument which is the input file will not be used --->
      <!--- The 1st argument we will use to pass the image object to (to add text) --->
      <cfset scaleX150_2 = imageCFC.addtext(scaleX150.img, "", "#myfilepath#\Images\_scaleX_150_marked_#uploadedImage#", 5, 5, fontDetails, "Sample Text")>
      <cfset scaleX150_2_rotated = imageCFC.rotate(scaleX150.img,
"", "#myfilepath#\Images\_scaleX_150_rotated_#uploadedImage#", -90 )>
      <cfset scaleX150_2_flipHorizontal = imageCFC.flipHorizontal(scaleX150.img,
"", "#myfilepath#\Images\_scaleX_150_flipHorizontal_#uploadedImage#", 400)>

      <!--- scaleX image to 300px wide --->
      <cfset scaleX300 = imageCFC.scaleX("", "#myfilepath#\Images\#uploadedImage#", "", 300)>
      <cfset scaleX300_2_rotated = imageCFC.rotate(scaleX300.img,
"", "#myfilepath#\Images\_scaleX_300_rotated_#uploadedImage#", -90 )>
      <cfset scaleX300_2_flipHorizontal = imageCFC.flipHorizontal(scaleX300.img,
"", "#myfilepath#\Images\_scaleX_300_flipHorizontal_#uploadedImage#", 400)>
      <cfset fontDetails =
StructNew()>
      <cfset fontDetails.fontfile =
"#myfilepath#\fonts\framd.ttf">
      <cfset fontDetails.color =
"white">
      <cfset fontDetails.size = 10>
      <!--- Take the scaleX 300 image and add text to it --->
      <!--- The 2nd argument which is the input file will not be used --->
      <!--- The 1st argument we will use to pass the image object to (to add text) --->
      <cfset scaleX300_2 = imageCFC.addtext(scaleX300.img, "", "#myfilepath#\Images\_scaleX_300_marked_#uploadedImage#", 5, 5, fontDetails, "Sample Text")>

      <!--- scaleX image to 640px wide --->
      <cfset scaleX640 = imageCFC.scaleX("", "#myfilepath#\Images\#uploadedImage#", "", 640)>
      <cfset fontDetails =
StructNew()>
      <cfset fontDetails.fontfile =
"#myfilepath#\fonts\framd.ttf">
      <cfset fontDetails.color =
"white">
      <cfset fontDetails.size = 20>
      <!--- Take the scaleX 640 image and add text to it --->
      <!--- The 2nd argument which is the input file will not be used --->
      <!--- The 1st argument we will use to pass the image object to (to add text) --->
      <cfset scaleX640_2 = imageCFC.addtext(scaleX640.img, "", "#myfilepath#\Images\_scaleX_640_marked_#uploadedImage#", 10, 10, fontDetails, "Sample Text")>
      <cfset scaleX640_2_watermark = imageCFC.watermark(scaleX640.img,
"" ,"","#myfilepath#\Images\sold.jpg",0.5,50, 50,"#myfilepath#\Images\_scaleX_640_waterMarked_#uploadedImage#")>

   </cfif>
   </body>
</html>

Conclusion

There are many uses for these types of operations. I hope that I demonstrated some use

About This Tutorial
Author: daddyFL
Skill Level: Intermediate 
 
 
 
Platforms Tested: CFMX7
Total Views: 108,168
Submission Date: August 31, 2006
Last Update Date: June 05, 2009
All Tutorials By This Autor: 1
Discuss This Tutorial
  • What is or where is bgdigits.jpg? Thanks in advance! Jen

  • Thanks very much for the tutorial - does scaling not work on gif images??

  • If not mistaken, prior to CF 6.1, CF was on top of a C++ server. Since 6.1, CF has been on top of Java, so image.cfc is out of the question for you. Pablo has "capthca" web server here at easyCFM.com, not sure if CF 5 will allow you to invoke the web service. If you are able to upgrad to CF 7, you should do so. There are a whole world of new features that will simplify your life. One last thing you may want to look at is a custom tag that handles image manipulation. There are quite a few out there, and if i'm not mistaken, there is a C++ tag that allows for it. Good luck to you!

  • Hi!.. how to build form that user can upload picture and show it in master/detail(fixed size(thumbnail)) and when user click the picture, another page show the real size of that picture. thanks!

  • Hi, I want to implement this (Form Submission Using Image Verification) on a server running cold fusion 5. Will that work? If not, do you know where I can get code for similar captcha functionality that will?

  • To anyone who is interested: Rick Root the author of the imageCFC that I used in this tutorial has created some really great examples on his site. He has also released a new version of this CFC that does more than the older version I was using here. There is now complete documentation available online at the site below: http://www.opensourcecf.com/imagecfc/ When I wrote the tutorial, I spent quite sometime looking for an easy to implement solution that didn't require installing any extras, this is the solution! Any questions or need help you can email me if you're still having trouble.

  • I'm getting an error that scalex does not exist in this cfc. Would you want to use resize now?

  • very interestering, You can delete the orignal image after processing.

  • How would you go about checking to make sure the text input by the user matches the text in the image? Tried several statements but was unsuccessful. Thanks! Great tutorial!

  • You can put your cfc's anywhere on your computer or directory that you see fit. I usually create a folder that I put my .css,.js,.cfc,etc... You can do it however you see fit. To achieve an 800 wide image, I still recommend scaling. If for some reason the original image dimensions don't evenly reduce down to a size of 800 x 600, the image may not appear as desired. When you are scaling an image, you are setting the width that you want and the rest is proportioned based on the desired width. Here is the code for an 800 wide image: I used the following to determine the path(s) of the image(s): You may however want to place your images in a different directory or choose some other method of determining that. Take the sample code that I provided when submitting this tutorial which is all neatly placed in a folder,than take the folder and put it where ever you run your CF apps and run any of the .cfm files. Make changes, play around with it so that you can see what is happening. If you have any further questions, please post it here or in the forum so that others can benefit from the Q&A.

Advertisement

Sponsored By...
Mobile App Development (IOS, Android, Cordova, Phonegap, Objective-C, Java) - Austin, Texas Mobile Apps - Touch512, LLC.