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

Posted 2023-02-25

【中文标题】Chrome 和 IE8 上的 Jcrop 问题 - 仅在页面刷新时才显示裁剪

【英文标题】：Problem with Jcrop on Chrome and IE8 - cropping only shown if page refreshed

【发布时间】：2011-06-16 01:27:31

【问题描述】：

我正在开发一个 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(); ?>

所有这些都可以在 Safari 和 FF 4.0 上完美运行。用户选择一个区域进行裁剪，提交，页面会用裁剪后的图像刷新。

在 Chrome 和 IE8 上，当用户提交时，页面会刷新，但图像会被裁剪。踢球者 --> 如果在浏览器中点击刷新，然后图像被裁剪。

不用说这很奇怪。有没有人建议从哪里开始调试这个问题——或者你以前见过这种情况/描述过吗？

感谢您的帮助。

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

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

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

我检查了我的服务器图像文件，它证实了这一点：虽然裁剪的图像保存在我的服务器中，但在 Chrome 上显示的图像文件（同名）具有以前的未裁剪尺寸。

【问题讨论】：

你会认为它适用于 Chrome，因为它适用于 Safari。听起来它正在缓存旧图像，当你刷新它时它就在那里。你在用 GD 吗？

是的，实际上使用 gd2，我尝试清除缓存，但它仍然显示这种奇怪的行为——我同意 webkit 会在 Saf 上提出问题，但它在 Saf 和 FF 4 上运行良好

【参考方案1】：

通过更改包含以下内容的我的 .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 相同——也会被刷新。

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