DougHughes.net

I’ve recently had a number of questions form past users of the Alagad MagickTag who were transitioning to the Alagad Image Component regarding scaling of images.

When scaling an image using the MagickTag you would use the <cf_magickaction> tag and provide attributes for width and height. If you were only to provide a width or height but not the other, the image would be scaled proportionately. Unfortunately, the Image Component doesn’t make scaling an image proportionately to a specific width or height quite as easy (yet). However, I’ll tell you how to do this quite easily.

Before I do that, I wanted to announce that later this year I will be releasing the next major version of the Image Component. This upgrade will include a number of additional methods for scaling images and will address this missing functionality. But, I expect you probably need to do this now.

Let’s say that you have a form on your website where users will upload images. You do not know the height or width of these images ahead of time and you want to take scale all images proportionately so that their width is 100px. The algorithm for this is quite easy. Simply use the Image Component’s method to get the uploaded image’s width (as of now, we really don’t care about the height). Let’s say the height is 200px. If you divide the target width (100px) by the source width (200px) you will get the ratio which you need to use to scale the entire image. In this case it’s .5. Once you have the ratio call the scalePixels method and pass in the image width and height multiplied by the ratio. If the image height were 300px then the resulting images width and height would be 100 x 150.Here’s some sample code:

<!--- create the image component --->
<cfset myImage = CreateObject("Component", "Image") />

<!--- read an image --->
<cfset myImage.readImage(expandPath("test.jpg")) />

<!--- declare the target width to be 100px --->
<cfset targetWidth = 100 />

<!--- get the image's width and height --->
<cfset initialHeight = myImage.getHeight() />

<cfset initialWidth = myImage.getWidth() />

<!--- find out the ratio between the target and initial widths --->
<cfset scaleRatio = targetWidth/initialWidth />

<!--- scale the image --->
<cfset myImage.scalePixels(initialWidth * scaleRatio, initialHeight * scaleRatio) />

<!--- output the new image --->
<cfset myImage.writeImage(expandPath("test_sm.jpg"), "jpg") />

This code can easily be changed to scale to a specific height and the same basic concept could be extended to provide the ability to scale to fit within a width and height or to only scale if the image is bigger than the target size.

Good Luck!