Re-size image on upload

[jamie61880]

Hi everyone,

   I have created a Blog page on our site and am setting up a page for anyone in the company to update the blog with some text and an image.

   Does anyone know how to set up code so when the Browse button is clicked that it will resize the image automatically to what I want it to be with the pixel size and file size? I’m thinking having it be 200 pixels wide and height doesn't matter. Maybe have the file size at 4K or so. It would be like Facebook when you upload a large file image, but it re-sizes it automatically.

    We have CF version 7, so I can't use the CFimage code that's in 8 and 9. I've found something called imageCFC.resize(), but I don't understand how to use this or incorporate this into my code.

This is what I have on my pages now just to upload an image file:

Add Page:

<td><input type="file" name="Image1" id="Image1"></td>

Add Action Page:

<cfif isdefined("form.Image1")>

  <cffile action="upload" filefield="Image1" destination="#ExpandPath("BlogPhotos/")#" nameconflict="overwrite">

  <cfset uploadedfile = "test_file\#file.serverfile#">

<input name="Blog_Image" type="hidden" value="#file.ServerFile#">

</cfif>

<cfquery Datasource="#application.DataSource#">

Insert Into Blog (Blog_Image)

Values ('#file.ServerFile#')

</cfquery>

I then just display the image on my blog page as an image src file.

Thanks.

Andy

[BreakawayPaul]

I hate to see posts slowly sinking to the bottom of the page with no replies, so I'll take a stab.

Does the server you're hosted on have ImageMagick?  It's a pretty popular package on shared hosting accounts (for PHP at least - not sure about CF).  If not, it's a free download.

I think you can run ImageMagick from within CF, assuming the commands you need to run it are not restricted.

http://stackoverflow.com/questions/751477/how-to-work-with-imagemagick-from-coldfusion

You could also try ImageCFC

http://www.opensourcecf.com/imagecfc/

Good luck!

[jamie61880]

Breakaway Paul,

   Thanks for writing back. I have no idea if our Cold Fusion server has ImageMagick on it or not. How do I install it on the server exactly?

   I just tried running this code for imageCFC on a cfm page:

<cfset imageCFC = createObject("component","image")>

<cfset imgInfo = imageCFC.scaleWidth("", "BlogPhotos/C11IP139.jpg", "BlogPhotos/tn_C11IP139.jpg",100)>

<img src="C11IP139.jpg" width="100" alt="resized image"/>

But the error I receive back says:

Could not find the ColdFusion Component image

What does this mean exactly? Does imageCFC have to be downloaded to the server in order to use the code above?

Andy

[BreakawayPaul]

Well I've never used ImageCFC so I'm not really sure how it works, but that sounds like a pathing problem (i.e. your code doesn't know whetre to find image.cfc).

ImageCFC has its own forum for debugging and usage help:

http://www.opensourcecf.com/forums/threads.cfm?forumid=720D0ACD-09C9-EA19-9C27A91B9F0B7B7A

Imagemagick would probably have to be installed by the server admin.

[jamie61880]

So Imagemagick does not just get put as a folder under the root of our web site? It has to actually be installed on the server, correct? Can you send me an example of some code of how to re-size an image with Imagemagick?

Andy

[jamie61880 · Accepted solution]

I ended up using the ImageCFC code and was able to get it to work. I incorporated it into my upload file also so when an image is uploaded, it gets re-sized right away to the dimensions I want it to be. Here's the code that uploads the image into the correct folder and then also re-sizes it right away:

<cfif isdefined("form.Image1")>

  <cffile action="upload" filefield="Image1" destination="#ExpandPath("BlogPhotos/")#" nameconflict="overwrite">

  <cfset uploadedfile = "test_file\#file.serverfile#">

<input name="Blog_Image" type="hidden" value="#file.ServerFile#">

<!--- Imagecfc code re-sizes the image and saves it into the BlogPhotos folder at 200 pixels wide. --->

<cfset imagecfc = createObject("component","imagecfc.image")>

<cfset imgInfo = imageCFC.scaleWidth(

"",

"http://www.ironwoodelectronics.com/blog/BlogPhotos/#file.serverfile#",

"\\Maple\Ironwoodelectronics\blog\BlogPhotos\#file.serverfile#",

200)>

</cfif>

Andy

[BreakawayPaul]

Nice job! Glad you got it working.