Image Uploads and Resizing with ColdFusion 8
Posted on July 13, 2007, under
ColdFusion
| 22637 Views
One of the many ways in which ColdFusion 8 helps the developer is with the new cfimage tag. No matter how much training is given, someone is going to try to upload a 1600x1200 image to your application. Instead of fighting with them over their images, handle it with a few lines of code and get back to worrying about Starbuck actually being dead.
In this example, we are going to upload the image, check the image size, calculate the proper aspect ration, generate the resized image, and create a thumbnail for the image.
<!---
Create folder structure or change to fit your needs
Expects images to be uploaded to images and thumbnails go in thumbs
--->
<!--- set the full path to the images folder --->
<cfset mediapath = expandpath('./images')>
<!--- set the desired image height ---->
<cfset thumbsize = 75>
<!--- set the desired image width --->
<cfset imagesize = 320>
<cfif structKeyExists(form,"fileUpload") and len(form.fileUpload)>
<cffile action="upload"
filefield="FileUpload"
destination="#MediaPath#"
nameconflict="makeunique">
<!--- read the image ---->
<cfimage name="uploadedImage"
source="#MediaPath#/#file.serverFile#" >
<!--- figure out which way to scale the image --->
<cfif uploadedImage.width gt uploadedImage.height>
<cfset thmb_percentage = (thumbsize / uploadedImage.width)>
<cfset percentage = (imagesize / uploadedImage.width)>
<cfelse>
<cfset thmb_percentage = (thumbsize / uploadedImage.height)>
<cfset percentage = (imagesize / uploadedImage.height)>
</cfif>
<!--- calculate the new thumbnail and image height/width --->
<cfset thumbWidth = round(uploadedImage.width * thmb_percentage)>
<cfset thumbHeight = round(uploadedImage.height * thmb_percentage)>
<cfset newWidth = round(uploadedImage.width * percentage)>
<cfset newHeight = round(uploadedImage.height * percentage)>
<!--- see if we need to resize the image, maybe it is already smaller than our desired size --->
<cfif uploadedImage.width gt imagesize>
<cfimage action="resize"
height="#newHeight#"
width="#newWidth#"
source="#uploadedImage#"
destination="#MediaPath#/#file.serverFile#"
overwrite="true"/>
</cfif>
<!--- create a thumbnail for the image --->
<cfimage action="resize"
height="#thumbHeight#"
width="#thumbWidth#"
source="#uploadedImage#"
destination="#MediaPath#/thumbs/#file.serverFile#"
overwrite="true"/>
<cfoutput>
<img src="images/thumbs/#file.serverFile#" height="#thumbHeight#" width="#thumbWidth#" align="left" hspace="10"><br>
Original Image: #uploadedImage.width#x#uploadedImage.height#<br>
Resized Image: #newWidth#x#newHeight#<br>
Thumbnail: #thumbWidth#x#thumbHeight#<br><br>
<a href="images/#file.serverFile#">See Image</a><br>
</cfoutput>
</cfif>
<form action="" method="post" enctype="multipart/form-data">
<label for="fileUpload">Choose Image: </label>
<input type="file" name="fileUpload">
<input type="submit" value="Upload Image">
</form>
Create folder structure or change to fit your needs
Expects images to be uploaded to images and thumbnails go in thumbs
--->
<!--- set the full path to the images folder --->
<cfset mediapath = expandpath('./images')>
<!--- set the desired image height ---->
<cfset thumbsize = 75>
<!--- set the desired image width --->
<cfset imagesize = 320>
<cfif structKeyExists(form,"fileUpload") and len(form.fileUpload)>
<cffile action="upload"
filefield="FileUpload"
destination="#MediaPath#"
nameconflict="makeunique">
<!--- read the image ---->
<cfimage name="uploadedImage"
source="#MediaPath#/#file.serverFile#" >
<!--- figure out which way to scale the image --->
<cfif uploadedImage.width gt uploadedImage.height>
<cfset thmb_percentage = (thumbsize / uploadedImage.width)>
<cfset percentage = (imagesize / uploadedImage.width)>
<cfelse>
<cfset thmb_percentage = (thumbsize / uploadedImage.height)>
<cfset percentage = (imagesize / uploadedImage.height)>
</cfif>
<!--- calculate the new thumbnail and image height/width --->
<cfset thumbWidth = round(uploadedImage.width * thmb_percentage)>
<cfset thumbHeight = round(uploadedImage.height * thmb_percentage)>
<cfset newWidth = round(uploadedImage.width * percentage)>
<cfset newHeight = round(uploadedImage.height * percentage)>
<!--- see if we need to resize the image, maybe it is already smaller than our desired size --->
<cfif uploadedImage.width gt imagesize>
<cfimage action="resize"
height="#newHeight#"
width="#newWidth#"
source="#uploadedImage#"
destination="#MediaPath#/#file.serverFile#"
overwrite="true"/>
</cfif>
<!--- create a thumbnail for the image --->
<cfimage action="resize"
height="#thumbHeight#"
width="#thumbWidth#"
source="#uploadedImage#"
destination="#MediaPath#/thumbs/#file.serverFile#"
overwrite="true"/>
<cfoutput>
<img src="images/thumbs/#file.serverFile#" height="#thumbHeight#" width="#thumbWidth#" align="left" hspace="10"><br>
Original Image: #uploadedImage.width#x#uploadedImage.height#<br>
Resized Image: #newWidth#x#newHeight#<br>
Thumbnail: #thumbWidth#x#thumbHeight#<br><br>
<a href="images/#file.serverFile#">See Image</a><br>
</cfoutput>
</cfif>
<form action="" method="post" enctype="multipart/form-data">
<label for="fileUpload">Choose Image: </label>
<input type="file" name="fileUpload">
<input type="submit" value="Upload Image">
</form>
