Quelle est la meilleure façon de forcer une actualisation de l'image sur une page Web?

Question

J'ai un site asp.net-mvc. Sur l'une des pages, j'ai une image, j'utilise jcrop pour permettre aux utilisateurs de recadrer l'image. Lorsque ce clic de soumission, je recadre l'image sur le côté serveur, puis recharger la page. Le problème est que l'image est la même qu'avant. . Si j'appuie sur F5 et actualise la page, l'image mise à jour s'affiche.

Y a-t-il un moyen d'éviter de forcer un rafraîchissement F5 dans ce cas?

Answer 1

C'est un truc, mais ça fonctionne. Mettez un nombre variable et aléatoire dans l'URL de l'image.

Quelque chose comme:

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

Peut-être qu'il y a un meilleur moyen, mais cela fonctionne pour moi.

Answer 2

Je vous recommande de poster les coordonnées du recadrage sur un script PHP, en recadrant php, en lui donnant un nouveau nom puis en affectant l'attribut SRC à l'URL de la nouvelle image.

Quelque chose comme mais il a besoin rangement:

page 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); 
} 

Answer 3

Certains astuce est de changer le nom de l'image. Vous pouvez également modifier l'en-tête HTTP pour vous assurer que le navigateur ne met pas en cache l'image.

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

Answer 4

Vous devriez être capable de rafraîchir l'image en utilisant JQuery.

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

Fondamentalement, vous devez définir à nouveau le src de l'image lorsque l'utilisateur soumet l'image recadrée.

Un autre problème que vous pouvez rencontrer si l'image porte le même nom est la mise en cache du navigateur.

Cela a été répondu ici avant: How to reload/refresh an element(image) in jQuery

Answer 5

expansion sur l'une des autres réponses

si vous avez la photo sur votre serveur, ou accessible, vous pouvez stat le fichier lui-même et utiliser le temps modifié dans la source d'image:

<?php 

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

?> 

Cela donne le meilleur des deux mondes car il utilisera normalement la mise en cache du navigateur mais forcera une relecture si le fichier d'image est changé (par exemple en le re-téléchargeant)