2

我有一个 asp.net-mvc 站点。在其中一个页面上，我有一张图像，我使用jcrop来允许用户裁剪图像。当单击提交时，我在服务器端裁剪图像，然后重新加载页面。问题是图像看起来和以前一样。. 如果我按 F5 并刷新页面，则会显示更新的图像..

在这种情况下，是否有避免强制 F5 刷新的方法？

4

5 回答 5

10

这是一个技巧，但它有效。

在图像 url 中放置一个变量和随机数。就像是：

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

也许有更好的方法，但它对我有用。

于 2013-05-29T20:57:38.417 回答
4

扩展其他答案之一

如果您的服务器上有照片，或者可以访问，那么您可以统计文件本身并使用图像源中的修改时间：

<?php

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

?>

这提供了两全其美，因为它将正常使用浏览器缓存，但如果图像文件被更改（例如通过重新上传）将强制重新读取

于 2014-03-14T17:05:18.003 回答
0

一些技巧是更改图像的名称。您还可以更改 HTTP 标头以确保浏览器不缓存图像。

在 ASP.Net MVC 和 IIS 7.5 中设置最佳 http 缓存标头和服务器参数

于 2013-05-29T20:09:05.290 回答
0

您应该能够使用 JQuery 刷新图像。

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

基本上，当用户提交裁剪后的图像时，您需要再次设置图像的 src。

如果图像具有相同的名称，您可能会遇到的另一个问题是浏览器缓存。

之前已经在这里回答过：How to reload/refresh an element(image) in jQuery

于 2013-05-29T20:10:19.157 回答
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);
}
于 2013-05-29T20:05:16.660 回答