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

时间:2011-06-16 01:27:32

标签: javascript jquery codeigniter google-chrome jcrop

我正在开发一个使用JCrop裁剪用户个人资料图片的Codeigniter应用。

上传图片后,我使用标准方法运行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(); ?>

所有这些在Safari和FF 4.0上完美运行。用户选择要裁剪的区域,提交并使用裁剪的图像刷新页面。

在Chrome和IE8上,当用户提交时,页面会刷新,但图片 会被裁剪。踢球者 - &gt;如果在浏览器中点击刷新, 则会裁剪图片

毋庸置疑,这很奇怪。有没有人建议从哪里开始调试这个问题 - 或者你看到过这种情况/之前描述过吗?

感谢您的帮助。

编辑:仍未解决但进一步测试显示这可能是Cr和IE8上的缓存问题。 Chrome似乎保留了原始上传的图片并显示它,即使裁剪尺寸是由服务器上的codeigniter提交,处理和保存的。在我的CI控制器结束时进行裁剪我把

redirect('/profile/picture', 'refresh');

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

我检查了我的服务器图像文件并确认了这一点:虽然裁剪后的图像保存在我的服务器中,但Chrome上显示的图像文件(同名)具有之前的非裁剪尺寸。

1 个答案:

答案 0 :(得分:0)

通过更改包含以下

的.htaccess解决了这个问题
<IfModule mod_headers.c>
# 45 MIN
<FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf)$">
  Header set Cache-Control "max-age=2700"
</FilesMatch>
</IfModule>

我删除了jpg|jpeg,现在事情就像在Cr和IE8中一样。

同意,这应该是第一个排除故障的地方之一,但奇怪的是FF和Saf似乎没有像Cr和IE8那样遵守这个规则。在Saf和FF上,尽管有.htaccess规则,但新创建的裁剪JPEG(即使具有与原始JPEG相同的文件名)也会刷新。

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