Coldfusion Image Crop issue

Iv been having this issue for some time now. I'm an average coldfusion developer and I just can't seem to figure this out.

What im trying to do here is have an upload image form; followed by a check to see if the image exceeds 2000px; if it does then resize the image down to 1000px and also crop the image at the top and bottom only leaving the centre section of the image.

So basically the 2000px image would be resized to 1000px and the top and bottom of the image would be cropped by a percentage. Leaving only the centre (horizontally) of the image.

I tried coding this and it was a complete mess and riddled with errors so I'm not even going to post it.

I'm looking for a code snippet that could do all that. I'm experienced enough in coldfusion to adapt that snippet to my already in place coding.

Thanks allot.
JCDesignsAsked:
Who is Participating?
 
_agx_Commented:
Something like this should work.

 One note, if images can be smaller than 1000 x 550 you may need special handling, depending on the desired result:  do nothing, enlarge, paste onto larger image, etc...

<cfscript>

// Load file into CF image object
img = ImageRead("c:\some\path\testImage.png");

// ensure it is no wider than 2000
if (img.width > 2000) 
{
    imageResize(img, 2000, "");
}

// determine if image exceeds maximum dimensions
heightOverage = img.height - 550;
widthOverage = img.width  - 1000;

// calculate offsets from center
posX = widthOverage > 0 ? widthOverage / 2 : 0;
posY = heightOverage > 0 ? heightOverage / 2 : 0;

// if image needs to be cropped
if (posX || posY) {
    ImageCrop( posX, posY, 1000, 550);
}

writeDump(" final width=#img.width# x height=#img.height#");
</cfscript>

Open in new window

0
 
_agx_Commented:
(Edit)  When you say 1000px does that refer to width, height or both (ie square area)?

Cropping and resizing are different.  What do you want to happen if only one of the dimensions exceeds 1000px? For example if the image is 1500px x 900 px. Do you want to crop 500 px off the sides - OR maintain the original ratio and shrink it so that it fits within a 1000px area max
0
 
JCDesignsAuthor Commented:
Yes. Sorry I should've been more specific.
If the width exceeds 2000px then proceed.

But it would still do both things ideally.

Resize the image if it's over 2000px wide and then after that crop the top and bottom off by a percentage leaving a 1000px width image with only the centre of the image remaining
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
JCDesignsAuthor Commented:
If the image is under 2000px wide, then just do the cropping.

More or less I have a header section (which is rectangular at the top of this site). It only allow for a rectangular image to be displayed. As of now if a full resolution image is uploaded it pushes everything out of the way and screws up the layout. So I need the image for that area to be a certain width and hieght. So if the uploaded image is resized to 1000px (for example) and equally (%) cropped it would fit and not effect the layout.
0
 
_agx_Commented:
>> I have a header section (which is rectangular at the top of this site).

Makes sense, but the exact specs are still a little unclear. Just to clarify:

>> Resize the image if it's over 2000px wide
So if it's wider than 2000px, you want to resize (maintaining ratio) so it's only 2000px wide.  

>> crop the top and bottom off by a percentage leaving a 1000px width image
Once the image is no more than 2000px wide, you want to crop it to grab the center of the image.  

>> the image for that area to be a certain width and height

If the maximum width is 1000px - what is the max height?
0
 
JCDesignsAuthor Commented:
Let's say 550px. I can adjust that as needed once it's all setup and functioning.
0
 
JCDesignsAuthor Commented:
Thanks. I'll give that a try later.
One question though (and I probably should've mentioned this before)

I need the final image file name to be inserted into the DB after it's been adjusted. What would the final variable be for that image? Also how would I call that image (that was just uploaded) to start this procedure?

Sorry for the noobish questions. I bit off a bit more then I can chew with this project. Thanks for all your assistance.
0
 
_agx_Commented:
No problem.

Normally you use cffile action="upload" to upload the file somwhere.

         <cffile action="upload" fileField="form.theImageField" destination="..."  .....>

CFFile will return a structure with details about the file.  Use the variables to get the it's location on the server.
         <cfset pathToImage = cffile.serverDirectory &"\"& cffile.serverFileName>

Then read it into an image variable:

         <cfset img = ImageRead(pathToImage)>

..... and do the resizing and cropping. When you're done, save the cropped image back to disk using ImageWrite.  Assuming you want to overwrite the uploaded file, you already know the name  ie  #cffile.serverFileName#.. Just save that value to the db.
0
 
JCDesignsAuthor Commented:
Sounds great. Ok I'll gve that a try and report back tomorrow. Thanks again
0
 
_agx_Commented:
Sounds good. I'm heading out too. I'll check back tomorrow
0
 
JCDesignsAuthor Commented:
Sorry. Iv just been busy the last few days. I haven't got a chance to try this all out. I will in the next couple days.
0
 
JCDesignsAuthor Commented:
Worked like a charm.. Thanks  a lot!
0
 
_agx_Commented:
Welcome :) Glad it helped.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.