2

I have a an asp.net-mvc site. On one of the pages, I have an image, I use jcrop to allow users to crop the image. When this click submit, I crop the image on the server side and then reload the page. The issue is that the image looks the same as before . . if i hit F5 and refresh the page then the updated image shows up..

Is there anyway to avoid having to force a F5 refresh in this case?

Michael Petrotta
  • 59,888
  • 27
  • 145
  • 179
leora
  • 188,729
  • 360
  • 878
  • 1,366
  • I guess you could do a javascript poll that requests the new image and drops in a replacement dom object? – ctrlplusb May 29 '13 at 20:05
  • The page stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url has some good answers too, in detail, describing caching and unique U.R.I. techniques with pros and cons. – Edward Sep 17 '16 at 11:34

5 Answers5

10

This is a trick, but it works.

Put a variable and random number in the image url. Something like: 

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

Maybe there's a better way, but it works for me.

Rob Wells
  • 36,220
  • 13
  • 81
  • 146
Jairo Filho
  • 342
  • 5
  • 17
  • 2
    If you want it to reload every time, just add time() from php or JS or whatever you use to the query string. – M H Nov 09 '17 at 20:45
  • cool trick, i'using angularJS so just made: $scope.TimeToday = new Date(); and added that on to the url as such – Ewald Bos Oct 20 '20 at 10:27
4

Expanding on one of the other answers

if you have the photo on your server, or accessible then you can stat the file itself and use the modified time in the image source:

<?php

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

?>

This gives the best of both worlds as it will use browser caching normally but will force a re-read if the image file is changed (e.g. through re-upload)

Mark
  • 41
  • 1
  • Thank you! This is golden! Tip:If one is using database to get the images you can store last_modified field and use that instead of reading the file. – Miro May 23 '15 at 19:12
  • Best answer to my point of view thanks. in python it's something like : `from os.path import basename, getmtime file_name = '%s?%s'%(basename(file_path),getmtime(file_path))` it returns something like `img_0001.jpg?1616065600.4623241` – jerome Mar 22 '21 at 09:51
0

I would recommend posting the coordinates of the crop to a php script, cropping in php, giving it a new name then setting the SRC attribute to the url of the new image.

Something like but needs tidying:

jcrop page:

<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);
}
Andy Gee
  • 3,149
  • 2
  • 29
  • 44
0

Some trick is to change the name of the image. You can also change the HTTP header to make sure to browser does not cache the image.

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

Community
  • 1
  • 1
the_lotus
  • 12,668
  • 3
  • 36
  • 53
0

You should be able to refresh the image using JQuery.

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

Basically you need to set the src of the image again when the user submits the cropped image.

Another problem you may encounter if the image has the same name is browser caching.

This has been answered here before: How to reload/refresh an element(image) in jQuery

Community
  • 1
  • 1
geekymartian
  • 645
  • 5
  • 11