Question

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

在这种情况下，是否可以避免强制进行F5刷新？

Answer 1

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

在图片网址中输入变量和随机数。类似的东西：

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

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

Answer 2

扩展其他一个答案

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

<?php

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

?>

这两个世界都是最好的，因为它会正常使用浏览器缓存，但如果图像文件被更改（例如通过重新上传），则会强制重新读取

Answer 3

我建议将裁剪的坐标发布到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 4

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

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

Answer 5

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

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

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

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

此处已在此处回答：How to reload/refresh an element(image) in jQuery

强制在网页上刷新图片的最佳方法是什么？

5 个答案: