Question

I am working on a Codeigniter app that uses JCrop to crop the user’s profile image.

Once the image is uploaded, I am using a standard method to run Jcrop and submit coordinates via a form.

<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(); ?>

All this works perfectly on Safari and FF 4.0. The user selects an area for cropping, submits and the page refreshes with the cropped image.

On Chrome and IE8, when the user submits, the page refreshes but the image is not cropped. The kicker –> if one hits refresh in the browser, then the image is cropped.

Needless to say this is very weird. Does anyone have suggestions where to begin debugging this issue — or have you seen this happen/described before?

Thanks for helping.

EDIT: Still not resolved but further testing shows this may be a cache issue on Cr and IE8. Chrome seems to retain the original uploaded image and displays it even though the crop dimensions were submitted, processed, and saved by codeigniter on the server. At the end of my CI controller for cropping I put

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

which had no effect on Chrome and IE8 when the new page loads after the cropped image is submitted. The cropped image only shows if I manually trigger ‘refresh’ on the browser.

I have checked my server image files and it confirms this: although the cropped image was saved in my server, the image file (with same name) that is displayed on Chrome has the previous non-cropped dimensions.

Answer 1

This was resolved by changing my .htaccess which contained the following

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

I removed jpg|jpeg and now things work as they should in Cr and IE8.

Agreed, this should have been one of the first places to troubleshoot, but curiously FF and Saf don’t seem to obey this rule in quite the same way as Cr and IE8. On Saf and FF the newly minted cropped JPEGs — even having the same filename as the original JPEGs — are refreshed despite the .htaccess rule.

If anyone has ideas on how to make this behavior consistent across browsers please post a comment.