Каков наилучший способ заставить изображение обновиться на веб-странице?

Question

У меня есть сайт asp.net-mvc. На одной из страниц у меня есть изображение, я использую jcrop, чтобы пользователи могли обрезать изображение. Когда это нажатие кнопки, я обрезаю изображение на стороне сервера, а затем перезагрузите страницу. Проблема в том, что изображение выглядит так же, как и раньше. , если я нажму F5 и обновить страницу, то появится обновленное изображение.

Есть ли все-таки, чтобы избежать принудительного обновления F5 в этом случае?

Answer 1

Это трюк, но он работает.

Поместите переменное и случайное число в URL-адрес изображения. Что-то вроде:

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

Возможно, есть лучший способ, но он работает для меня.

Answer 2

Я бы порекомендовал разместить координаты урожая в 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); 
} 

Answer 3

Некоторые Хитрость заключается в том, чтобы изменить имя изображения. Вы также можете изменить заголовок HTTP, чтобы браузер не кэшировал изображение.

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

Answer 4

Вы должны быть в состоянии обновить изображение с помощью JQuery.

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

В принципе, вам нужно снова установить src изображения, когда пользователь отправляет обрезанное изображение.

Еще одна проблема, с которой вы можете столкнуться, если изображение с тем же именем является кешированием браузера.

Это было отвечено здесь раньше: How to reload/refresh an element(image) in jQuery

Answer 5

Расширение на одном из других ответов

, если у вас есть фото на вашем сервере, или доступны, то вы можете стат сам файл и использовать время изменения в источнике изображения:

<?php 

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

?> 

Это дает лучшее из обоих миров, так как обычно будет использовать кеширование браузера, но будет вынуждено перечитать, если файл изображения будет изменен (например, путем повторной загрузки)