7 Replies - 5213 Views - Last Post: 27 January 2009 - 10:24 AM Rate Topic: -----

#1 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 195
  • Joined: 03-December 08

Rotate images in a folder

Post icon  Posted 16 January 2009 - 12:42 PM

Hello and thanks for your time. I have a coldfusion script that uploads images to a folder as well as store the path to the images in an Access database. Pretty simple.

Then I have a .cfm page that performs a database SELECT query to gather all the images and display them on the page. Also pretty simple.

I have added a checkbox next to each image that is loop-generated for the display page, and if you check this box and then hit the form submit button, it deletes the image from the database. Works great.

<cfquery name="getdetails" datasource="#datasource#">
SELECT sm_image,imgid
FROM gallery
</cfquery>

<table width="650" align="center">

	   <cfloop>***Loop runs here to populate the page with images; loop includes the checkbox***
		
<form method="post" name="deleteSelected" action="delete_images.cfm" enctype="multipart/form-data">
			 
<cfoutput>

<input type="checkbox" name="delete" value="#imgid#">Delete

</cfoutput>

	   </cfloop>

<input name="Submit" type="submit" value="Modify Data" class="submit">
										
</form>		 
</table>



Upon checking the box next to the desired image to delete, this action page is called...

<cfif isDefined("form.delete")> 
 <cfloop list="#form.delete#" index="i"> 
   <cfquery name="delete" datasource="#datasource#"> 
	 DELETE FROM gallery
	 WHERE imgid = #i# 
   </cfquery> 
 </cfloop> 
</cfif>



This loops through the database deleting the image that has the same imgid as the one checked in the form.

What I would like to do is add another check box called rotate, and if that is checked then run a cf script that rotates the image in 45 degree increments. I am not sure how to do this. I am having trouble figuring out how to match the checked image to the one in the folder. I think I can use the same concept as above to target the image via the database, but how do I then perform the rotate and save the image back to the folder?

I'm stumped. Any ideas, tips, or tricks will be greatly appreciated. Thanks!!

Is This A Good Question/Topic? 0
  • +

Replies To: Rotate images in a folder

#2 Craig328  Icon User is offline

  • I make this look good
  • member icon

Reputation: 1948
  • View blog
  • Posts: 3,488
  • Joined: 13-January 08

Re: Rotate images in a folder

Posted 16 January 2009 - 02:26 PM

Well, depending on your app, do you NEED to save the image in a rotated form?

If you're using CF8 or BD7, you can use the CFIMAGE tag to rotate and resize an image for the user. If you simply record the rotation they selected and save that instead of changing the original image, you can pull the rotation angle along with the image path in the future and then simply apply the rotation angle to the image via CFIMAGE.

CF8 docs for CFIMAGE is here.

Good luck!

This post has been edited by Craig328: 16 January 2009 - 02:26 PM

Was This Post Helpful? 0
  • +
  • -

#3 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 195
  • Joined: 03-December 08

Re: Rotate images in a folder

Posted 19 January 2009 - 06:34 AM

OK, I have done a bit more research into this project (work-related) and I have more information as to why they want to rotate after the image is uploaded.

We have a separate department that is in charge of taking pictures of incoming personnel. After they take the pics they bulk upload them into the system (server/folder structure).

Sometimes they turn the camera 45 degrees to get the shot resulting in a picture that needs to be rotated for viewing. The sideways image is uploaded with all the other normal pics (as a bulk upload), so they need to go in and rotate the images that need correction AFTER they are uploaded to the folder structure/database. They do this in their browser with a coldfusion app that we are working on.

So, I thought it would be easy to display all the uploaded images (got that part working) and then have a check box next to each one to designate which ones are to be rotated. If you check the box and hit submit, then the ones checked would be read, rotated by a 45 degree increment, and then re-saved overwriting the original. This is ok because the original one is sideways.

Where I am stuck is I do not know how the script knows which image to rotate based on the checkbox. My current code is below

Upload Form:
<form method="post" name="uploader" action="upload_action.cfm" enctype="multipart/form-data" onsubmit="return formCheck();">
<table width="550" border="1" align="center" cellpadding="0" cellspacing="1" bordercolor="#999999">
  <tr> 
	<td bgcolor="#EEEEEE"><div align="left"><font color="#fff" size="3" face="Arial, Helvetica, sans-serif"><strong>&nbsp;Browse to Find Images to Upload</strong></font></div></td>
  </tr>
  <tr> 
	<td>
<input type="file" name="upload" value="" class="form">
	</td>
  </tr>
  <tr>
	<td>
<input name="description" type="text" id="description" size="30" class="form">
		Please Provide a Short Description of Your Image</td>
  </tr>
  <tr>
	  <td>
<input name="Submit" type="submit" value="Upload New Image" class="submit">
	  </td>
  </tr>
</table>
</form>  



CF Action Page:
<cfif upload NEQ ''>
		<CFFILE ACTION="upload"
				FILEFIELD="upload"
				DESTINATION="#uploads#" <!---defined in application.cfm--->
				NAMECONFLICT="OVERWRITE">
		 
<cfset upload_file= #CFFILE.serverfile#>
		
<cfimage name="uploadedImage"
  source="#uploads##CFFILE.serverFile#"/>
			
<cfoutput>
		<div align="center">#serverFile# successfully added. Size of the uploaded 
			file: #Numberformat(Evaluate(File.FileSize/1024))# KB.</div>
		</cfoutput> 
		<div align="center"></div>
	  </cfif> 

	  <!---Insert image into the database--->

	  <cfquery name="InsertDetails" datasource="#datasource#">
	  INSERT INTO gallery(sm_image, lg_image, img_text ) 
	  VALUES ('#serverFile#','#serverFile#','#form.description#') 
	  </cfquery>



Current Images Displayed as Gallery:
<cfquery name="getdetails" datasource="#datasource#">
SELECT sm_image,imgid
FROM gallery
</cfquery>

<table width="650" align="center">
<!---this loops through the database findings and lays out the pics along with two checkboxes: delete, and rotate--->
<cfloop query="getdetails" startrow="#startrecord#" endrow="#Displaynext#">
<cfif tc eq 0><!---If table columns = 0 --->
<tr bordercolor="000"></cfif>
<td align="center" valign="middle" <cfif #columndisplay# is 3 > width="33%"<cfelse>width="25%"</cfif>>
				
<form method="post" name="deleteSelected" action="delete_images.cfm" enctype="multipart/form-data">
			 
<cfoutput>
<font face="Arial, Helvetica, sans-serif" size="2"><a href="java script:PopupPic('imgid=#getdetails.imgid#')"><img src="#dir##getdetails.sm_image#" border=0 height=110 alt="Click to Enlarge"></a></font>

<input type="checkbox" name="delete" value="#imgid#">Delete
<input type="checkbox" name="rotate" value="#imgid#">Rotate

</cfoutput>
										
<cfset tc=#tc#+1>
</td>
<cfif tc eq #columndisplay#>
</tr>
<cfset tc=0> 
</cfif>
</cfloop>
<input name="Submit" type="submit" value="Modify Data" class="submit">
</form>
				   
				
<!---I gave each checkbox a unique value. When you submit the form, all of the values that were checked should post to the action page as a comma-delimited list. The script then loops over the list and performs a delete or rotate.--->
				
</table>



And finally the delete/rotate_images.cfm action page(deletes and/or rotates the selected images):
<cfif isDefined("form.delete")> 
<cfloop list="#form.delete#" index="i"> 
<cfquery name="delete" datasource="#datasource#"> 
DELETE FROM gallery
WHERE imgid = #i# 
</cfquery> 
</cfloop> 
</cfif>

<cfif isDefined("form.rotate")>
<cfloop list="#form.rotate#" index="i">
<cfquery name="rotate" datasource="#datasource#"> 
SELECT FROM gallery
WHERE imgid = #i# 
<cfimage action="rotate"
angle="90"
source="#i#"
destination="#uploads#"
overwrite="true"/>
</cfquery>
</cfloop>
</cfif>

<cfinclude template="upload.cfm">



What you can see in the delete_images.cfm is that the script queries the database and then deletes all the images that match the imgID of the selected images.

I tried the same approach with rotating the images, but it does not seem to work and that's where I hit a roadblock in my brain.

Sorry this is a lengthy post. I appreciate your time and talents!!

Regards,
Mark

This post has been edited by midasxl: 19 January 2009 - 10:44 AM

Was This Post Helpful? 0
  • +
  • -

#4 Craig328  Icon User is offline

  • I make this look good
  • member icon

Reputation: 1948
  • View blog
  • Posts: 3,488
  • Joined: 13-January 08

Re: Rotate images in a folder

Posted 21 January 2009 - 01:24 PM

Mark:

I think the way I would approach this would be as I originally described. However, from your code one part isn't real clear. You have this in your code example...
<cfimage action="rotate"
angle="90"
source="#i#"
destination="#uploads#"
overwrite="true"/>


...but you don't define what the value of #uploads# is for the overwrite attribute (at least not that I can see). That would seem to be the number 1 possible issue.

That said, my original suggestion was to perhaps save a rotation value in your gallery table and then simply apply that rotation to an ImageRotate function in your gallery for later display. I guess what I'm missing is the reason that the image, in file form, would itself need to be physically rotated and saved that way. There may be a business reason that that's necessary but if the appearance of the image in the gallery is what you're needing the rotation for...then asking them for a rotation angle and then applying that value in an image display using the ImageRotate() function should address your problem as well.

Good luck.
Was This Post Helpful? 0
  • +
  • -

#5 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 195
  • Joined: 03-December 08

Re: Rotate images in a folder

Posted 23 January 2009 - 08:36 AM

Thanks for the response. I have since modified the code in my never-ending quest to figure this out. The code you questioned now looks like this...

<cfif isDefined("form.rotate")>
	<cfloop list="#form.rotate#" index="i">
	<cfquery name="rotate" datasource="#datasource#"> 
	 SELECT lg_image
	 FROM gallery
	 WHERE imgid = #i#
	   	<cfimage action="rotate"
		angle="90"
		source="#dir##lg_image#"
		destination="#dir##lg_image#"
		overwrite="true"/>
	</cfquery>
  </cfloop>
</cfif>


Now I am sure I am missing something here, but what I see above reads like this...

If the form.rotate checkbox is checked (thereby indicating the desire to rotate the image) Then initiate a loop which creates a list of all the form.rotate checkboxes that are checked and feeds them to the index "i" variable.

Then we begin a database query selecting all images where the imgid (database table column) equals "i", which holds the value of the checkbox, which is the imgid from another query.

Then for each pass rotate the selected images 90 degrees.

The source is #dir# (which is gallery/), and #lg_image# (which is the name of the image from the query (i.e. camaro.jpg). The destination is the same place and has an overwrite of true.

Looks like it should work to me, but I get the following error...

Variable LG_IMAGE is undefined.  
 
  
The error occurred in C:\ColdFusion8\wwwroot\gallery\delete_images.cfm: line 25
 
23 :			<cfimage action="rotate"
24 :	 	angle="90"
25 :	 	source="#dir##lg_image#"
26 : 		destination="#dir##lg_image#"
27 :	 	overwrite="true"/>


What am I missing?

I understand your suggestion and plan on using it, but this has now become a personal learning experience of how to get this to work, regardless of it being the most efficient solution. Thanks for your assistance!!

This post has been edited by midasxl: 23 January 2009 - 08:38 AM

Was This Post Helpful? 0
  • +
  • -

#6 Craig328  Icon User is offline

  • I make this look good
  • member icon

Reputation: 1948
  • View blog
  • Posts: 3,488
  • Joined: 13-January 08

Re: Rotate images in a folder

Posted 23 January 2009 - 09:22 AM

I note in your code sample that you have the cfimage tag inside the query closing tag. That won't work.

If that is simply a posting error then there is another way to beat this down step by step. This is your current code:
<cfif isDefined("form.rotate")>
	<cfloop list="#form.rotate#" index="i">
	<cfquery name="rotate" datasource="#datasource#">
	 SELECT lg_image
	 FROM gallery
	 WHERE imgid = #i#
		   <cfimage action="rotate"
		angle="90"
		source="#dir##lg_image#"
		destination="#dir##lg_image#"
		overwrite="true"/>
	</cfquery>
  </cfloop>
</cfif>


...and this is step 1 of debugging it for an error on lg_image:
<cfif isDefined("form.rotate")>
	<cfloop list="#form.rotate#" index="i">
	<cfquery name="rotate" datasource="#datasource#">
	 SELECT lg_image
	 FROM gallery
	 WHERE imgid = #i#
		</cfquery>
	
	<cfoutput>dir: [#dir#]  i: [#i#]   lg_image: [#rotate.lg_image#]<br></cfoutput>

  </cfloop>
</cfif>


What this will do is spit out all the variables you're trying to use within your loop and show them to you. If there's one thing my time as a dev has taught me is take nothing for granted. When it starts erroring weird, go back to the basics...confirm the existence of the variables you're trying to use. That's step 1.

If you can get that block to run without error then slip the cfimage tag back in there (leaving the output stuff in place) and run it again. If you get output but then the cfimage errors, there are a few things that can be done to perhaps work around it...but try this first.

This post has been edited by Craig328: 23 January 2009 - 09:28 AM

Was This Post Helpful? 0
  • +
  • -

#7 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 195
  • Joined: 03-December 08

Re: Rotate images in a folder

Posted 23 January 2009 - 10:38 AM

Thanks for the tips. I ran the suggested dump and below are the findings

<cfif isDefined("form.rotate")>
	<cfloop list="#form.rotate#" index="i">
	<cfquery name="rotate" datasource="#datasource#"> 
	 SELECT lg_image FROM gallery
	 WHERE imgid = #i#
	 </cfquery>

<cfoutput query="rotate">dir: [#dir#]  i: [#i#]  lg_image: [#lg_image#]

<!---This is the output--->

dir: [gallery/] i: [163] lg_image: [Confederate.jpg] 



#dir# is correct
#i# is correct (this is the id of the image that is checked for rotation)
#lg_image# is correct

So this looks good. next in the puzzle is the following...

<cfimage action="rotate"
		angle="90"
		source="#dir##lg_image#"
		destination="#dir##lg_image#"
		overwrite="true"/>


Where does this go in the code? Right now I have it as follows...

<cfif isDefined("form.rotate")>
	<cfloop list="#form.rotate#" index="i">
	<cfquery name="rotate" datasource="#datasource#"> 
	 SELECT lg_image FROM gallery
	 WHERE imgid = #i#
	 </cfquery>
	 
<cfoutput query="rotate">dir: [#dir#]  i: [#i#]  lg_image: [#lg_image#]
</cfoutput>
	
	   	<cfimage action="rotate"
		angle="90"
		source="#dir##lg_image#"
		destination="#dir##lg_image#"
		overwrite="true"/>
	
 </cfloop>
</cfif>


This returns the familiar error of "Variable LG_IMAGE is undefined"

Thanks for your help!!

This post has been edited by midasxl: 23 January 2009 - 11:31 AM

Was This Post Helpful? 0
  • +
  • -

#8 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 195
  • Joined: 03-December 08

Re: Rotate images in a folder

Posted 27 January 2009 - 10:24 AM

OK, my friends, I figured out this mystery. Through some reasoning and some trial and error I have this script doing what I want it to do. Which is upload pics to database with paths to folder structure. Display the pics in an orderly manner based on database query. Select individual pics from the gallery to either delete or rotate, and execute.

uploadForm.cfm

<form method="post" name="uploader" action="upload_action.cfm" enctype="multipart/form-data" onsubmit="return formCheck();">
<table width="550" border="1" align="center" cellpadding="0" cellspacing="1" bordercolor="#999999">
  <tr> 
	<td bgcolor="#EEEEEE"><div align="left"><font color="#fff" size="3" face="Arial, Helvetica, sans-serif"><strong> Browse to Find Images to Upload</strong></font></div></td>
  </tr>
  <tr> 
	<td>
<input type="file" name="upload" value="" class="form">
	</td>
  </tr>
  <tr>
	<td>
<input name="description" type="text" id="description" size="30" class="form">
		Please Provide a Short Description of Your Image</td>
  </tr>
  <tr>
	  <td>
<input name="Submit" type="submit" value="Upload New Image" class="submit">
	  </td>
  </tr>
</table>
</form>



actionPage.cfm

<cfif upload NEQ ''>
		<CFFILE ACTION="upload"
				FILEFIELD="upload"
				DESTINATION="#uploads#" <!---defined in application.cfm--->
				NAMECONFLICT="OVERWRITE">
		 
<cfset upload_file= #CFFILE.serverfile#>
		
<cfimage name="uploadedImage"
  source="#uploads##CFFILE.serverFile#"/>
			
<cfoutput>
		<div align="center">#serverFile# successfully added. Size of the uploaded 
			file: #Numberformat(Evaluate(File.FileSize/1024))# KB.</div>
		</cfoutput> 
		<div align="center"></div>
	  </cfif> 

	  <!---Insert image into the database--->

	  <cfquery name="InsertDetails" datasource="#datasource#">
	  INSERT INTO gallery(sm_image, lg_image, img_text ) 
	  VALUES ('#serverFile#','#serverFile#','#form.description#') 
	  </cfquery>



gallery.cfm

<cfquery name="getdetails" datasource="#datasource#">
SELECT sm_image,imgid
FROM gallery
</cfquery>

<table width="650" align="center">
<!---this loops through the database findings and lays out the pics along with two checkboxes: delete, and rotate--->
<cfloop query="getdetails" startrow="#startrecord#" endrow="#Displaynext#">
<cfif tc eq 0><!---If table columns = 0 --->
<tr bordercolor="000"></cfif>
<td align="center" valign="middle" <cfif #columndisplay# is 3 > width="33%"<cfelse>width="25%"</cfif>>
				
<form method="post" name="deleteSelected" action="delete_images.cfm" enctype="multipart/form-data">
			 
<cfoutput>
<font face="Arial, Helvetica, sans-serif" size="2"><a href="java script:PopupPic('imgid=#getdetails.imgid#')"><img src="#dir##getdetails.sm_image#" border=0 height=110 alt="Click to Enlarge"></a></font>

<input type="checkbox" name="delete" value="#imgid#">Delete
<input type="checkbox" name="rotate" value="#imgid#">Rotate

</cfoutput>
										
<cfset tc=#tc#+1>
</td>
<cfif tc eq #columndisplay#>
</tr>
<cfset tc=0> 
</cfif>
</cfloop>
<input name="Submit" type="submit" value="Modify Data" class="submit">
</form>
				   
				
<!---I gave each checkbox a unique value. When you submit the form, all of the values that were checked should post to the action page as a comma-delimited list. The script then loops over the list and performs a delete or rotate.--->
				
</table>



delete_rotate.cfm

<cfif isDefined("form.delete")> 
 <cfloop list="#form.delete#" index="i"> 
   <cfquery name="delete" datasource="#datasource#"> 
	 DELETE FROM gallery
	 WHERE imgid = #i# 
   </cfquery> 
 </cfloop> 
</cfif>

<cfif isDefined("form.rotate")>
<cfloop list="#form.rotate#" index="i">
	<cfquery name="rotate" datasource="#datasource#"> 
	 SELECT lg_image FROM gallery
	 WHERE imgid = #i#
	</cfquery>
   
	<cfloop query="rotate">
		
	   	<cfimage action="rotate"
		angle="90"
		source="#dir##lg_image#"
	destination="#dir##lg_image#"
		overwrite="yes"/>
		
				</cfloop>
				   
</cfloop>
</cfif>



Let me know if anyone finds this useful, or if you see something wrong, or that could use improvement. Thanks!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1