latest reactions

David Levin
Does the trim still work if the form fie …
mal
as long as the join keys are same in eac …
Tarida
I am using ipinfodb.com to redirect the…
David Levin
Good stuff. For those interested in a UD …
PtcBux
oh Wilbur Gans wrote thank you so much…

Clicky Web Analytics
Use OpenDNS
ZERIGO DNS

Ultimate dns hosting based on pre-defined templates, DNS redirection and lot's more.

mxna feeds

Face Detection with JJIL Library and ColdFusion (Experiment)Face Detection with JJIL Library and ColdFusion (Experiment)Viviotech joins as a hosting provider!CFUnit launches its production release!CFUnit v0.5.2 ReleasedHighlight Your Project with CFUnitCFUnit releases its first Release CandidateNew CFUnit PrimerCFUnit Now Supports ColdFusion Template TestingCFUnit Beta Release!ColdFusion Security Hotfix APSB13-13Writing Secure CFML cfObjective 2013 SlidesDitching ColdFusion's UI Controls at cfObjectiveColdFusion Contract Job in San Jose, CAGetting Into Ember: Part 4

All files are strictly confidential: all information is classified.
© Copyright 2002 - 2013 mximize.com.
All right reserved.

Visit Carlos GallupaMXNA webfeed

Using ColdFusion image functions to resize an image into a square thumbnail

After trying several times to resize and crop the image to fit nicely into a square I stumbled upon the function ImageScaleToFit() and that was exactly what I needed for my problem. I want to fit an image into a square thumbnail, but with the imageCrop or Resize you can't get the image to fit. :-(

What I did is the following... after I found the ImageScaleToFit function I also found the ImagePaste function which will paste 1 image into the other. After thinking about this I came with the solution to first scale the image to the correct size, then make a new blank image with the imageNew() function and paste the 2 together.

With the ImagePaste() function you also need to calculate the x and y value where the image should be pasted upon the other image. See the code below for an example

The original image:


<!---Read the image into an object --->
<cfimage action="read" name="myImage" source="65.jpg">

<!--- Set the square size of the thumb --->
<cfset sq_size = 200>

<!--- Write the result to a file. --->
<cfset ImageSetAntialiasing(myImage,"on")>
<cfset ImageScaleToFit(myImage,sq_size,sq_size)>

<!--- Calculate the x and y position to paste the image --->
<cfif myImage.width GTE myImage.height>
    <cfset x = 0>
    <cfset y = ceiling((myImage.width - myImage.height)/2)>
<cfelse>
    <cfset x = ceiling((myImage.height - myImage.width)/2)>
    <cfset y = 0>
</cfif>

<cfset newimg = ImageNew("",sq_size, sq_size, "rgb", "FF0000")>

<cfset ImagePaste(newimg, myImage, x, y)>

<cfimage action="WRITETOBROWSER" source="#newimg#" format="JPG">


The result image looks like this. Picture taken from www.wickedweasel.com

15702 viewed | 6 opinion(s)  | del.icio.us | Digg it | Tjarko @ 13/12/07 12:29 cet


Reactions:

Sebastiaan wrote.... (site)

Hi Tjarko, we incorporate the same thing in our webshop. A user can upload an image and we automagically scale it down to a thumbnail using CFimage. Only works in CF8 of course ;-) The beauty is that the user only needs to upload the one image he/she needs and we than scale it to the two set sizes (full and thumb). No more hassle in Photoshop ;-)

17 December 2007 9:41 cet  

toujours wrote....

this has really helped me a lot. thank you very much for posting this, it is very kind of you.

30 April 2009 20:06 cet  

Serkan wrote.... (mail)

Thank's for sharing!

05 November 2011 9:20 cet  

Walker wrote.... (mail)

Thanks for posting your thoughts. I modified your code slightly to find the x and y position dynamically, so you do not need to check to see if it's a horizontal or vertical with the if tag...


<cfset x = 640 >
<cfset y = 480 >
<cfset imageScaleToFit(CurrentImage, x, y, "highestQuality")>

<cfset xCenter = ceiling((x - CurrentImage.width)/2)>

<cfset yCenter = ceiling((y - CurrentImage.height)/2)>

<cfset newimg = ImageNew("", x, y, "rgb", "FF0000")>

<cfset ImagePaste(newimg, CurrentImage, xCenter, yCenter )>

<cfset imageWrite(newimg, "#DirectoryPath1#", "0.80", true)>

21 November 2011 19:42 cet  

Tjarko wrote.... (site)

Eej Walker, that's pretty cool, I will change this in my image component.

21 November 2011 22:48 cet  

Bubba wrote....

Thanks - works great!

14 June 2012 17:50 cet  

Leave your comment

Your name


Your url/website/link/email....


Some room for your reaction is placed here..



The answer to the ultimate question is?? (42 ;-))




URL en mail addresses are translated for you... life sometimes is that simple!!