強制在網頁上刷新圖片的最佳方式是什麼？

我有一個asp.net-mvc網站。在其中一頁上，我有一張圖片，我使用jcrop來允許用戶裁剪圖像。當點擊提交時，我裁剪服務器端的圖像，然後重新加載頁面。問題是圖像看起來和以前一樣。。如果我打F5刷新頁面，然後更新的圖像顯示出來。強制在網頁上刷新圖片的最佳方式是什麼？

是否有避免在這種情況下強制F5刷新？

來源

2013-05-29 leora

我想你可以做一個JavaScript輪詢，請求新的圖像並在一個替代的dom對象下降？ – ctrlplusb

頁面stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url也有一些很好的答案，詳細描述了緩存和獨特的U.R.I.技術有利有弊。 – Edward

這是一種伎倆，但它的工作原理。

將一個變量和隨機數放在圖片url中。例如：

<img src="photo.jpg?xxx=987878787">

也許有更好的辦法，但它適用於我。

來源

2013-05-29 20:57:38

如果您希望每次都重新加載，只需從php或JS或任何您使用的查詢字符串中添加time（）。 –

我會建議張貼作物的座標到php腳本，在php中裁剪，給它一個新的名字，然後將SRC屬性設置爲新圖像的url。

喜歡的東西，但需要整理：

jcrop頁：

<form id="crop_settings" action="saveimage.php" method="post" style="display:none"> 
    <input type="hidden" id="x" name="x" /> 
    <input type="hidden" id="y" name="y" /> 
    <input type="hidden" id="w" name="w" /> 
    <input type="hidden" id="h" name="h" /> 
</form> 

<button id="save_picture">save image</button> 

<script> 
    $('#cropbox').Jcrop({ 
     onChange: updatePreview, 
     onSelect: updatePreview 
    }); 
    function updatePreview(c){ 
     $('#x').val(c.x); 
     $('#y').val(c.y); 
     $('#w').val(c.w); 
     $('#h').val(c.h); 
    }; 
    $("#save_picture").click(function(){//some save button 
     $.ajax({ 
      type: "POST", 
      url: "saveimage.php", 
      data: $("#crop_settings").serialize(), 
      success: function(data){ 
       $(#the_display_image).attr("src","new.jpg") 
      } 
     }); 
    }); 
</script>

saveimage.php

if(isset($_POST['x'])&&isset($_POST['y'])&&isset($_POST['w'])&&isset($_POST['h'])){ 
    $targ_w = 300; 
    $targ_h = 500; 

    $src = 'original.jpg'; 
    $img_r = imagecreatefromjpeg($src); 
    $dst_r = ImageCreateTrueColor($targ_w,$targ_h); 

    imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']); 
    imagejpeg($dst_r,'new.jpg',90); 
}

來源

2013-05-29 20:05:16

一些技巧是改變圖像的名稱。您還可以更改HTTP標頭以確保瀏覽器不會緩存圖像。

Setting optimum http caching headers and server params in ASP.Net MVC and IIS 7.5

來源

2013-05-29 20:09:05

您應該能夠刷新使用JQuery的圖像。

$("#image").attr("src", "/imagecropped.jpg");

基本上你需要在用戶提交裁剪圖像時再次設置圖像的src。

如果圖像具有相同名稱，則可能遇到的另一個問題是瀏覽器緩存。

這已經在這裏找到答案之前：How to reload/refresh an element(image) in jQuery

來源

2013-05-29 20:10:19 geekymartian

上其他的答案

的一個擴展，如果你有你的服務器，或訪問那麼你可以統計文件本身，並使用修改時間的圖像源的照片：

<?php 

    if (is_file($PathToFile . '/photo.jpg')) 
    { 
     $FileDetails = stat($PathToFile . '/photo.jpg'); 
     echo '<img src="photo.jpg?MT=' . dechex($FileDetails['mtime']) . '" />'; 
    } 

?>

這給了兩全其美的好處，因爲它通常會使用瀏覽器緩存，但如果圖像文件被改變，將強制重新讀取（例如，通過重新上傳）

來源

2014-03-14 17:05:18 Mark

謝謝！這是金！提示：如果使用數據庫獲取圖像，則可以存儲last_modified字段並使用該字段而不是讀取該文件。 – Miro

強制在網頁上刷新圖片的最佳方式是什麼？

回答

相關問題