保存的圖像的HTML5 URL顯示以前創建的圖像時點擊

我有一個HTML5應用程序將畫布圖像保存到服務器，然後提供一個鏈接到在新窗口中打開的圖像。保存的圖像的HTML5 URL顯示以前創建的圖像時點擊

這個工作正常，我第一次保存它，但如果我創建並保存一個新的圖像，然後點擊鏈接，它會顯示以前創建的舊圖像。

點擊刷新將強制它顯示新的，但我想知道是否有辦法確保它顯示正確的圖像，以便我不必刷新頁面？

下面是我用來保存圖像。

<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>

而且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); 
    ?>

來源

2012-11-08 Malcolm

嘗試'imgOrURL = imgOrURL.src + +新的Date（）的getTime（）' – mplungjan

您可以嘗試

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

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

或PHP

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

或

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

以備將來使用節省頭痛。加入日期和時間首先是因爲使用md5，sha1()或rand()或JavaScript唯一鍵可以是一個噩夢，例如： '？RND ='

/// 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

來源

2012-11-08 13:32:22 TheBlackBenzKid

因爲你給的圖像相同的名稱和路徑，瀏覽器緩存很有幫助爲你。

使用獨特的路徑來避免這種情況！

來源

2012-11-08 13:26:45 Fenton

加一個這個。提供使用'rand（）'或'md5（）'或'sha1（）'的解決方案會更好。還有日期。 – TheBlackBenzKid

保存的圖像的HTML5 URL顯示以前創建的圖像時點擊

回答

相關問題