Question

我的代码裁剪了一张照片。裁剪的照片会不断更换，但浏览器只会加载第一个裁剪。我在网上搜索过，但没有任何效果。我已将随机字符串添加到php - new.jpg?time=t - 但这可以防止裁剪的图像被保存。我已经包括了

<head>   
    <meta charset="utf-8">   
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="-1" />
</head>

但浏览器仍然从缓存中加载。 HTML JavaScript和PHP如下。还有其他建议吗？

                <html>
                <head>
                    <title>Image Crop</title>
                    <style>
                        body{
                            margin: 0;
                            padding: 0;
                        }
                        #container{
                            width: 300px;
                        }
                        #box{
                            position: absolute;
                            top: 0px;
                            left: 0px;
                            width: 100px;
                            height: 100px;
                            background: white;
                            border: 2px solid blue;
                            opacity: 0.5;
                        }
                        #crop_button{
                            background: #333;
                            color: #fff;
                            padding: 5px;
                            border: 0px;
                            margin: 5px;
                        }
                        #output{
                            position: absolute;
                            top: 0px;
                            left: 300px;
                        }
                    </style>
                </head>
                <body>
                    <div id="container">
                        <img src="resized_IMG0934.jpg"/>
                        <div id="box"></div>
                    </div>
                    <div id="output"><image />
                    </div>
                    <button id="crop_button">Crop</button>
                    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
                    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
                    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
                    <script src="index.js"></script>
                </body>
            </html>

                 $(function() {
                $('#box').draggable({containment: '#container'});
                $('#box').resizable({containment: '#container'});
                $('#crop_button').click(function(){ 
                    var top = $('#box').position().top;
                    var left = $('#box').position().left;
                    var width = $('#box').width();
                    var height = $('#box').height();
                    $.post('crop.php', {top:top, left:left, width:width, height:height}, function(){
                        $('#output').html('<img src="new.jpg"/>');
                    });
                });
             });

                <?php
            $dst_x = 0;
            $dst_y = 0;
            $src_x = $_POST['left'];  //crop Start x
            $src_y = $_POST['top'];  //crop Start y
            $dst_w = $_POST['width']; //Thumb width
            $dst_h = $_POST['height']; //Thumb height
            $src_w = $_POST['width'];  //$src_w + $dst_w
            $src_h = $_POST['height'];  //$src_h + $dst_h

            $dst_image = imagecreatetruecolor($dst_w,$dst_h);
            $src_image = imagecreatefromjpeg("resized_IMG0934.jpg");
            imagecopyresampled($dst_image, $src_image, $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h);
            imagejpeg($dst_image, "new.jpg");

Answer 1

您有以下选择： - 添加以下元标记，这将强制不兑现

<meta http-equiv="pragma" content="no-cache" /> which you have already as I see

此外，如果要加载新版本的css文件，请执行以下操作

＆LT; link rel =“stylesheet”type =“text / css” HREF = “？mystyle.css版本= {NewVersionOnRequierd}” ＆GT;

图片相同

< img src="picture.jpg?123" alt="">

Answer 2

创建一个隐藏的iframe，并将其src设置为图片网址，如下所示：

function refresh(url){
    var iframe = document.createElement('iframe')
    iframe.src = url
}

Answer 3

好吧，我最终通过在图像元素源中附加一个随机字符串来解决问题，正如我多次尝试过的那样。我的Firefox安装似乎有问题。很难得出任何结论。感谢您的贡献。

强制浏览器忽略缓存

3 个答案: