What is the best way to force an image refresh on

Question

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?

Answer 1

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

Answer 2

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)

Answer 3

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

Answer 4

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.

Answer 5

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