2

asp.net-mvc サイトがあります。ページの 1 つに画像があり、jcropを使用してユーザーが画像をトリミングできるようにしています。この送信をクリックすると、サーバー側で画像がトリミングされ、ページがリロードされます。問題は、画像が以前と同じに見えることです。. F5 キーを押してページを更新すると、更新された画像が表示されます。

この場合、F5 の更新を強制する必要を回避する方法はありますか?

4

5 に答える 5

10

これはトリックですが、うまくいきます。

画像の URL に変数と乱数を入れます。何かのようなもの：

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

もっと良い方法があるかもしれませんが、私にはうまくいきます。

于 2013-05-29T20:57:38.417 に答える
4

他の答えの1つを拡張する

サーバーに写真がある場合、またはアクセスできる場合は、ファイル自体を統計し、画像ソースで変更された時間を使用できます。

<?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

トリミングの座標を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);
}
于 2013-05-29T20:05:16.660 に答える
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 に答える