Javascript Chrome和IE8上的Jcrop存在问题-仅当页面刷新时才会显示裁剪

Javascript Chrome和IE8上的Jcrop存在问题-仅当页面刷新时才会显示裁剪,javascript,jquery,codeigniter,google-chrome,jcrop,Javascript,Jquery,Codeigniter,Google Chrome,Jcrop,我正在开发一个Codeigniter应用程序,它使用JCrop裁剪用户的个人资料图像 上传图像后,我将使用标准方法运行Jcrop并通过表单提交坐标 <script type="text/javascript"> $(function() { $('#cropbox').Jcrop({ onSelect: updateCoords, aspectRatio: 1, setSelect

我正在开发一个Codeigniter应用程序,它使用JCrop裁剪用户的个人资料图像

上传图像后,我将使用标准方法运行Jcrop并通过表单提交坐标

<script type="text/javascript">
    $(function() {
            $('#cropbox').Jcrop({
            onSelect: updateCoords,
            aspectRatio: 1,
            setSelect: [ 50, 50, 150, 150 ],
            bgColor: '#fff',
            bgOpacity: .2
        });
    });
    function updateCoords(c)
        {
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);
        };
</script>

// some code here...

    <?php echo form_open('/profile/crop_picture', array('id' => 'crop_picture_form')); ?>

        <input type="hidden" name="x" id="x" />
        <input type="hidden" name="y" id="y" />
        <input type="hidden" name="w" id="w" />
        <input type="hidden" name="h" id="h" />
        <br />

    <?php echo form_close(); ?>

$(函数(){
$('#cropbox').Jcrop({
onSelect:updateCoords,
方面:1,
setSelect:[50,50,150,150],
bgColor:“#fff”,
不透明度:.2
});
});
函数updateCoords(c)
{
$('#x').val(c.x);
$('y').val(c.y);
$('w').val(c.w);
$('h').val(c.h);
};
//这里有一些代码。。。

所有这些在Safari和FF4.0上都非常有效。用户选择要裁剪的区域,提交并使用裁剪后的图像刷新页面

在Chrome和IE8上,当用户提交时,页面会刷新,但图像不会被裁剪。kicker-->如果在浏览器中点击刷新,则图像将被剪切

不用说,这很奇怪。有人建议从哪里开始调试这个问题吗?或者您以前见过这种情况吗

谢谢你的帮助

编辑:仍未解决,但进一步测试表明,这可能是Cr和IE8上的缓存问题。Chrome似乎保留了原始上传的图像并显示出来,即使裁剪尺寸是由服务器上的codeigniter提交、处理和保存的。在裁剪CI控制器的末尾,我将

重定向('/profile/picture','refresh')

在提交裁剪图像后加载新页面时,这对Chrome和IE8没有影响。仅当我在浏览器上手动触发“刷新”时,剪切的图像才会显示


我已经检查了我的服务器映像文件,它确认了这一点:虽然裁剪的映像保存在我的服务器中,但显示在Chrome上的映像文件(同名)具有以前的非裁剪维度。

通过更改包含以下内容的.htaccess解决了这一问题

<IfModule mod_headers.c>
# 45 MIN
<FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf)$">
  Header set Cache-Control "max-age=2700"
</FilesMatch>
</IfModule>

#45分钟
标题集缓存控制“最大年龄=2700”
我删除了
jpg | jpeg
,现在事情在Cr和IE8中正常工作

同意,这应该是故障排除的首要位置之一,但奇怪的是,FF和Saf似乎不像Cr和IE8那样遵守这条规则。在Saf和FF上,尽管有.htaccess规则,新裁剪的JPEG(甚至与原始JPEG具有相同的文件名)仍会刷新


如果有人对如何使这种行为在不同浏览器间保持一致有想法,请发表评论。

你会认为它适用于Chrome,因为它适用于Safari。这听起来像是在缓存旧图像,当你刷新它时,它就在那里。你在使用GD吗?是的,实际上使用gd2,我尝试清除缓存,但它仍然显示出这种奇怪的行为——我同意webkit会在Saf上提出问题,但它在Saf和FF 4上运行良好