Hello and thanks for your time; I hope I can explain this one clearly. I have an application that uploads an image, and then displays a thumbnail of the image via cfimage 'writeToBrowser'. The thumbnail image is wrapped in an anchor tag that opens a new page when clicked.
CODE
<a href="test_sid.cfm?ID=#getdetails.imgID#">
<cfimage id="pic" action="writeToBrowser"
source="#uploads##getdetails.image#"
height="110"
width="150"
border="0" />
</a>
When this image is clicked it takes you to 'test_sid.cfm' and passes the image id in the URL in order to display it full size on the new page.
CODE
<cfset variables.crop=#url.ID#>
<cfquery name="getPic" datasource="#datasource#">
SELECT *
FROM pics
WHERE imgID = #variables.crop#
</cfquery>
<form name="submitCrop" method="post" action="">
<cf_imageCropper imageCropperName="testimage" scriptSrc="#scriptSrc#" imgSrc="#uploadsRel##getPic.image#" />
<hr />
<input type="submit" name="submitCrop" value="Crop" class="buttons" style="font-weight:bold;" />
</form>
In the image source #uploadsRel# is a global variable path to the location of the queried image file: #getPic.image#
The form the image is wrapped in gets posted back to the same page and the following processing takes place.
The image is tested to see if a width and height exists, meaning the user has selected a crop area. The image is then read into an object and the x and y coordinates, along with the width and height are applied and then the new cropped image is written to a directory location. The new cropped image is then written to the browser. Another form is presented to save or go back and crop the image again.
CODE
<cfif structKeyExists(FORM,"submitCrop")>
<cfif testimage_height neq 0 and testimage_width neq 0>
<img class="icons" src="assets/images/tick_16.png" />Crop Successful!<br />
<cfimage action = "read" source="#uploads##getPic.image#" name="img" />
<cfset imageCrop(img, form.testimage_x1, form.testimage_y1, testimage_width, form.testimage_height)>
<cfscript>
ImageWrite(img,"#cumin##getPic.image#");
</cfscript>
<cfimage action="writeToBrowser" source="#img#" /></div>
<form name="saveCrop" method="post" action="">
<input type="submit" name="saveCrop" id="saveCrop" value="Save" class="buttons"/>
<input type="button" name="reload" value="Reload" class="buttons" onclick="java script:goback()">
</form>
OK, so far so good. Let's say the end user likes the cropped image and selects 'save'. The saveCrop occurs and the new cropped image overwrites the original uncropped image at the original location: #uploads##getPic.image#. The temporary cropped image is then deleted from its temp location.
CODE
<cfif structKeyExists(FORM,"saveCrop")>
<cfscript>
myImage=ImageRead("#cumin##getPic.image#");//location of temporary cropped image
ImageWrite(myImage,"#uploads##getPic.image#");
</cfscript>
<cffile action="delete" file="#cumin##getPic.image#"/>//delete temporary cropped image
<div id="successCrop">
<img class="icons" src="assets/images/tick_16.png" />Save Successful!<br />
After saving the new cropped image the page once again displays the image to the end user...
CODE
<cfscript>
myCrop=ImageRead("#uploads##getPic.image#");
</cfscript>
<cfimage action="writeToBrowser" source="#myCrop#" />
This successfully shows the newly cropped image. This all works very well. When I go back to the first page of thumbnails, the newly cropped image is displayed properly as a thumbnail. All is well. Here is the problem (finally).
When I once again click on the thumbnail it takes me to 'test_sid.cfm?ID=#getdetails.imgID#". What I see at this point is the full size ORIGINAL UNCROPPED IMAGE. Then when I hit the browser refresh button it shows me the NEWLY CROPPED full size image.
So this brings me to my question. How do I get the page to immediately show the newly cropped full size image without having to refresh the browser???
Thanks for any input!
Regards,
Mark
Forum Index:
Programming Help |
C and C++ |
VB6 |
Java |
VB.NET |
C# |
ASP.NET |
PHP |
ColdFusion |
Perl and Python |
Ruby |
Databases |
Other Languages |
Game Programming |
Mobile Development |
Software Development |
Computer Science |
Industry News |
Programming Tutorials |
C++ Tutorials |
Visual Basic Tutorials |
Java Tutorials |
VB.NET Tutorials |
C# Tutorials |
Linux Tutorials |
PHP Tutorials |
ColdFusion Tutorials |
Windows Tutorials |
HTML/JavaScript Tutorials |
CSS Tutorials |
Flash Tutorials |
Web Promotion Tutorials |
Graphic Design & Photoshop Tutorials |
Software Development Tutorials |
Database Tutorials |
Other Language Tutorials |
ASP.NET Tutorials |
Game Programming Tutorials |
WPF & Silverlight Tutorials |
4 Nov, 2009 - 10:45 AM
| 
