Question

I have an HTML5 app that saves the canvas image to the server and then provides a link to that image that opens in a new window.

This works fine the first time I save it, but if I create and save a new image and then click on the link it displays the old image that was previously created.

Clicking on refresh will force it to display the new one, but I was wondering if there is a way to make sure it displays the correct image so that I don’t have to refresh the page?

Below is what I am using to save the image.

<script>
function saveImageAs (imgOrURL) {
if (typeof imgOrURL == 'object')
  imgOrURL = imgOrURL.src;
window.win = open (imgOrURL);
setTimeout('win.document.execCommand("SaveAs")', 500);
}
</script>

<script type="text/javascript">

//****************************************************************
// Save canvas content into image file.                         //
//****************************************************************
function saveViaAJAX()
{
document.getElementById('saveimage').style.visibility="hidden";
document.getElementById("debugFilenameConsole").innerHTML="Please wait while your image is been generated";

var testCanvas = document.getElementById('canvas');
var canvasData = testCanvas.toDataURL("image/jpg");
var postData = "canvasData="+canvasData;
var debugConsole= document.getElementById("debugConsole");
debugConsole.value=canvasData;

//alert("canvasData ="+canvasData );
var ajax = new XMLHttpRequest();
ajax.open("POST",'savecanvas.php',true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
//ajax.setRequestHeader('Content-TypeLength', postData.length);

ajax.onreadystatechange=function()
{
    if (ajax.readyState == 4)
    {
        //alert(ajax.responseText);
        // Write out the filename.
            document.getElementById("debugFilenameConsole").innerHTML="Saved as <a target='_blank' href='myimage.php'> MyImage.jpg"+ajax.responseText+"</a><br>Reload this page to start a new image or click on the link above to open the file.";
    }
}
ajax.send(postData);
    }
    </script>

And the PHP

    <?php
    if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
    {
    // Get the data
    $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
    // Remove the headers (data:,) part. 
    // A real application should use them according to needs such as to check image type
    $filteredData=substr($imageData, strpos($imageData, ",")+1);
    // Need to decode before saving since the data we received is already base64 encoded
    $unencodedData=base64_decode($filteredData);
    //echo "unencodedData".$unencodedData;
    // Save file.  This example uses a hard coded filename for testing,
    // but a real application can specify filename in POST variable
    $fp = fopen( 'MyImage.jpg', 'wb' );
    fwrite( $fp, $unencodedData);
    fclose( $fp );
    }
    header("Content-Type: image/jpg");
    header("Expires: 0");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header("content-disposition: attachment; filename=MyImage.jpg");
    imagejpeg($img, null, 100);
    ?>

Answer 1

You can try

var random=new Date();
var random2=getTime();
var rand=random+random2;

imgOrURL = imgOrURL.src+'?rnd='+rand

or for PHP

$rand=rand();
MyImage.php?rand=<?=$rand?>

or

$image='MyImage.php?rand='.$rand.'';

For future use, to save headache. Add dates and times first because using md5 , sha1() or a rand() or JavaScript unique key can be a nightmare, example:

/// This is much cleaner

/11.1.2012/11.05/eachier93.jpg
/11.1.2012/11.05/4358390485/93.jpg
/11.1.2012/11.10/3249203489834/234234.jpg

/// then this

/files/342748234234234/234982348394/333535.jpg
/files/4535345345/234234234234/3332.jpg
/files/23423434324/023840348234/2343.jpg