Posted in ColdFusion | Posted on 05-20-2008 | 5,268 views
After my presentation yesterday, someone in the audience asked an interesting question. He wanted to shrink an image, but keep the original size. So imagine taking a large image, shrinking down the visual part of it, but keeping the image at the same size with some form of background now. This is relatively easy to do. First we can read in our source image:
2
3<!--- read it --->
4<cfset myimage = imageRead(source)>
Then we can shrink it:
2<cfset imageScaleToFit(myimage,250,250)>
Now let's create a new canvas. This will be a blank image. I'm picking an arbitrary size here. You could have checked the original images size instead, but for this example, I'll just use 400x400. Also note I intentionally picked a non-white background so I could see it working.
2<cfset img = imageNew("", 400, 400, "rgb", "##c0c0c0")>
Lastly, all you do is paste the shrunken image over the blank canvas we just made:
2<cfset imagePaste(img, myimage, 0,0)>
Here is the final result:
I have a friend that really needs to have this given to them. :-)
Next time I present, I need to share that URL. I'm not being fair by withholding that info.
Good timing for me this post. I'm working on a system that allows a user to upload an image - I then run some checks to see if the image is over a certain width or height, and create a thumbnail if it is. However, I want all my thumbnails to be square, to fit within the viewing area nicely.
No problem - I'll create a square canvas, and then paste in the resized image much as you do above. It all works great, but I really want the resized thumbnail to be centered in the new canvas. This is where my brain starts to hurt.
Here's an example of where I am at the moment - this is creating the thumbnails, but sticking the resized image in the top left corner of the canvas of course:
<cffile action="upload" destination="#application.image_root#" nameConflict="makeunique" filefield="theImage" result="fileupload">
<cfset newfile = fileupload.serverdirectory & "\" & fileupload.serverfile>
<cfset thumbfile = fileupload.serverdirectory & "\" & fileupload.SERVERFILENAME & "_thumb." & fileupload.SERVERFILEEXT>
<cfset smallSize = 180>
<!--- create a thumbnail image of exactly 180 x 180 if the image is larger) --->
<cfset newimage = imageRead(#newfile#)>
<cfif newimage.width GT smallSize OR newimage.height GT smallSize>
<cfif newimage.width GT newimage.height>
<cfset imageScaleToFit(newimage,#smallSize#,"")>
<!--- new canvas --->
<cfset canvas = imageNew("", 180, 180, "rgb", "##FFFFFF")>
<!--- paste it in --->
<cfset imagePaste(canvas, newimage, 0,0)>
<cfimage source="#canvas#" action="write" destination="#thumbfile#" overwrite="yes">
<cfelseif myImage.height GT myImage.width>
<cfset imageScaleToFit(newimage,"",#smallSize#)>
<!--- new canvas --->
<cfset canvas = imageNew("", 180, 180, "rgb", "##FFFFFF")>
<!--- paste it in --->
<cfset imagePaste(canvas, newimage, 0,0)>
<cfimage source="#canvas#" action="write" destination="#thumbfile#" overwrite="yes">
</cfif>
<cfelse>
<cfimage action="resize" height="#smallSize#" width="" source="#newfile#"
destination="#thumbfile#" overwrite="true"/>
</cfif>
Any suggestions on centering this thumbnail within the canvas.
(Width of Total Canvas - Width of small canvas) / 2
Logically then, assuming the original image isn't square, if it's wider I'd need to position by the y co-ordinate and if it's higher, I'd need to position by the x co-ordinate.
Thanks Ray.
How you getting on with Game of Thrones BTW? Finished it yet?
I'm about 90% done - well, 95% done. Darn, darn good. I should wrap by tonight.
Enjoy! I'm 1/4 of the way through the next book. Loving it. I might get a chance to read some tonight now I have this working.
[Add Comment] [Subscribe to Comments]