crop an image from the centre using coldfusion

Question

This is my first bit of programming in quite a while, so I'm basically starting from scratch, and I'm using coldfusion 8.

What I'm trying to do is create a series of uniform thumbnail images (always 68 X 46) from a variety of larger images, some portrait, some landscape. In both cases resizing the image to fill the height or width of the thumbnail and then cropping the excess image equally off either side (top/bottom, left/right). Just as photoshop does by default with canvas resize.

The code below works really well as long as the source images dimensions/ratio is perfect, but I've started to run into cases where the code fails. In this case, when a resized images width ends up being less than 68.

<cfif FileExists(ExpandPath('images/gallery/thumbs/thm_'&imageMed[i].medium.XmlText)) IS false> <!--- If the thumb doesn't exist, create it. --->
<cfif imageDataThumb.width gt imageDataThumb.height >
  <!--- Landscape --->
  <cfset ImageResize(cfImageThumb,"","46")>
  <cfset ImageCrop(cfImageThumb,(cfImageThumb.width-68)/2,0,68,46)> <!--- Crop left/right edges of images --->
  <cfimage source="#cfImageThumb#" action="write" destination="images/gallery/thumbs/thm_#imageMed[i].medium.XmlText#" overwrite="yes">
<cfelse>
  <!--- Portrait --->
  <cfset ImageResize(cfImageThumb,"68","")>
  <cfset ImageCrop(cfImageThumb,0,(cfImageThumb.height-23)/2,68,46)>
  <!--- Crop top/bottom edges of images --->
  <cfimage source="#cfImageThumb#" action="write" destination="images/gallery/thumbs/thm_#imageMed[i].medium.XmlText#" overwrite="yes">
</cfif>

Trying to solve these "edge cases" is turning the code into a mess. Is there a better way to approach this? Something in coldfusion or a cfc?

Answer 1

No. ImageScaleToFit would makes sure the image fits inside the bounds, which in this case leaves white space. I need to completely fill the available space with image.

Answer 2

I'd check the proportions of the image first and adjust the short side crop accordingly. I'm using CFScript for conciseness, but this could easily be converted to Coldfusion tags.

<cfscript>
  minimumRatio = 68 / 46;   // 1.478 (68 pixels / 46 pixels)
  width = ImageGetWidth(imageDataThumb);
  height = ImageGetHeight(imageDataThumb);

  // determine the longside and the aspect
  if (width GT height) {
      longside  = width;
      shortside = height;
      aspect    = "landscape";

  } else {
      longside  = height;
      shortside = width;
      aspect    = "portrait"; 
  }

  // determine the aspect ratio
  if (longside / shortside GTE minimumRatio) {
      // Do normal resize / crop

      if (width EQ longside) {
          // landscape


      } else {
          // portrait

      }

  } else {
      // ratio is too small - perform some additional calculations before resize / crop
      // in this case, you'll likely need to resize for the opposite side then crop the excess

  }

</cfscipt>

<cfimage source="#cfImageThumb#" action="write" destination="images/gallery/thumbs/thm_#imageMed[i].medium.XmlText#" overwrite="yes">

If you don't want to check for ratio, then verify the length and width is enough before resizing using similar logic.

Answer 3

The code needs to not only pay attention to the current ratio, but how you're changing the ratio with the crop.

Also, the height calculation was based on half the desired height, and should have been the full height.

Assuming all else is correct with your code, you should be able to place the code below into your FileExists if block, replacing the current content.

<cfset CurrentWidth = imageDataThumb.width>
<cfset CurrentHeight = imageDataThumb.height>
<cfset CurrentRatio = CurrentWidth / CurrentHeight>
<cfset DesiredRatio = 68 / 46>

<cfif CurrentWidth GTE CurrentHeight>
 <!--- Landscape Image --->
 <cfif CurrentRatio LT DesiredRatio>
  <!--- More Landscape --->
  <cfset Keep = "width">
 <cfelse>
  <!--- Less Landscape --->
  <cfset Keep = "height">
 </cfif>
<cfelse>
 <!--- Portrait Image --->
 <cfif CurrentRatio GT DesiredRatio>
  <!--- More Portrait --->
  <cfset Keep = "height">
 <cfelse>
  <!--- Less Portrait --->
  <cfset Keep = "width">
 </cfif>
</cfif>

<cfif Keep EQ "width">
  <!--- Crop top/bottom edges of images --->
  <cfset ImageResize(cfImageThumb,"68","")>
  <cfset ImageCrop(cfImageThumb,0,(cfImageThumb.height-46)/2,68,46)>
<cfelse>
  <!--- Crop left/right edges of images --->
  <cfset ImageResize(cfImageThumb,"","46")>
  <cfset ImageCrop(cfImageThumb,(cfImageThumb.width-68)/2,0,68,46)>
</cfif>

<cfimage source="#cfImageThumb#" action="write" destination="images/gallery/thumbs/thm_#imageMed[i].medium.XmlText#" overwrite="yes">

Answer 4

I know this is old, but you could just use AspectCrop in the imageUtils library from ben nadel. Check riaforge.com. It does exactly what you are looking for. I know, i wrote it. :)