latest reactions

spider
One way is to google for page which cont …
andy
you can find this tool here http://andy. …
Tjarko
Eej Walker, that's pretty cool, I will c …
Walker
Thanks for posting your thoughts. I modi …
Albert
Thanks !! …

Clicky Web Analytics
Use OpenDNS
ZERIGO DNS

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

mxna feeds

CF101 Archive: September 2007 Object Oriented PizzaJob Opening for ColdFusion Developer at Arizona State UniversityMy New Experience Getting ColdFusion Builder 2 Console WorkingCF101 Archive: February 2007 Data Table GatewaysJob Opening for Sr. ColdFusion Developer in CA/ San Fernando ValleyColdFusion Supports HTTP Verbs PUT And DELETE (As Well As GET And POST)Best wishes for the new FuseboxCF101 Archive: January 2007 Data Access ObjectsOpen Source Conference For CFML DevelopersSkype Blocking Web Services with IIS, ColdFusion & RailoCF101 Archive: October 2006 Five Cool Things with ColdFusionGenerate a tag cloud from an RSS feed with ColdFusionColdFusion MeetUp: Cloudy with a Chance of Tests, with Mike HenkeReminder - Adobe CookbooksCF101 Archive: September 2006 A first look at FusionDebug

All files are strictly confidential: all information is classified.
© Copyright 2002 - 2012 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

13238 viewed | 5 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  

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!!