0

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とFF4.0で完全に機能します。ユーザーがトリミングする領域を選択して送信すると、トリミングされた画像でページが更新されます。

ChromeとIE8では、ユーザーが送信すると、ページは更新されますが、画像はトリミングされません。キッカー->ブラウザで更新を押すと、画像がトリミングされます。

言うまでもなく、これは非常に奇妙です。誰かがこの問題のデバッグを開始する場所を提案していますか？またはこれが以前に発生/説明されているのを見たことがありますか？

助けてくれてありがとう。

編集：まだ解決されていませんが、さらにテストすると、これはCrとIE8のキャッシュの問題である可能性があります。Chromeは、クロップディメンションが送信され、処理され、codeigniterによってサーバーに保存された場合でも、元のアップロードされた画像を保持し、表示しているようです。トリミング用のCIコントローラーの最後に

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

これは、トリミングされた画像が送信された後に新しいページが読み込まれたときにChromeとIE8に影響を与えませんでした。トリミングされた画像は、ブラウザで「更新」を手動でトリガーした場合にのみ表示されます。

サーバーの画像ファイルを確認したところ、これが確認されました。トリミングされた画像はサーバーに保存されましたが、Chromeに表示される画像ファイル（同じ名前）には、以前のトリミングされていないサイズがあります。

4

1 に答える 1

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では正常に機能するようになりました。

同意しました。これはトラブルシューティングを行う最初の場所の1つであるはずですが、不思議なことに、FFとSafは、CrやIE8とまったく同じようにこのルールに従わないようです。SafとFFでは、新しく作成されたトリミングされたJPEG（元のJPEGと同じファイル名であっても）は、.htaccessルールに関係なく更新されます。

この動作をブラウザ間で一貫させる方法について誰かがアイデアを持っている場合は、コメントを投稿してください。

于 2011-06-16T04:10:21.350 に答える