jQuery Jcrop and PHP not actually cropping the image in IE9 only?

Question

I am having a weird bug with this script and I'm not sure where to go with it now.

The user uploads an image and are then given the option to crop it. Once they crop it, PHP should resize the image and store it.

This script works fine in IE8, IE7, Chrome, Safari, Firefox, etc. In IE9, it's failing; it simply doesn't resize the image. You upload a 500x300 image, crop it and you still end up with a 500x300 image, although no error messages are being triggered.

The "if(imagejpeg($dst_r,$src,$jpeg_quality)){" check is returning true and it is redirecting, even in IE9, but it's not actually editing the image.

All of the post variables are coming through; if I add a print_r($_POST); all of the dimensions are coming through fine. The images are being upload to the FTP, just not resized in IE9 only.

Any help would be greatly appreciated.

<?php

    //assign src
    $src = $uploadStoragePath.$_SESSION['USER']['user_id'].'/'.$_SESSION['crop_me'];

    if ($_SERVER['REQUEST_METHOD'] == 'POST'){

        //set width/height
        $targ_w = $targ_h = 125;

        //set jpeg quality
        $jpeg_quality = 90;

        //open the jpeg
        $img_r = imagecreatefromjpeg($src);
        $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

        //crop the jpeg
        imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);

        //header('Content-type: image/jpeg');

        //save the file
        if(imagejpeg($dst_r,$src,$jpeg_quality)){
            $_SESSION['GORB']['message'] = "Profile Picture Updated!";
            $_SESSION['GORB']['tone'] = "happy";
            header('Location: '.$siteConfigMainUrl.'db/?view=edit_profile_picture');
        }else{
            echo 'Image failed';
        }   
    }
?>
<html>
    <head>
        <script src="<?php echo $siteConfigUrl; ?>display/js/jquery.min.js"></script>
        <script src="<?php echo $siteConfigUrl; ?>display/js/jquery.Jcrop.min.js"></script>
        <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

        <script language="Javascript">

            function updateCoords(c)
            {
                $('#x').val(c.x);
                $('#y').val(c.y);
                $('#w').val(c.w);
                $('#h').val(c.h);
            };

            function checkCoords()
            {
                if (parseInt($('#w').val())) return true;
                alert('Please select a crop region then press submit.');
                return false;
            };

        </script>
        <script type="text/javascript">

            jQuery(function($){

            // create variables (in this scope) to hold the API and image size
            var jcrop_api, boundx, boundy;

                $('#target').Jcrop({
                    onChange: updatePreview,
                    onSelect: updatePreview,
                    aspectRatio: 1,
                    onSelect: updateCoords
                },function(){
                    // use the API to get the real image size
                    var bounds = this.getBounds();
                    boundx = bounds[0];
                    boundy = bounds[1];
                    // store the API in the jcrop_api variable
                    jcrop_api = this;
                });

                function updatePreview(c){

                    if (parseInt(c.w) > 0){
                        var rx = 125 / c.w;
                        var ry = 125 / c.h;

                        $('#preview').css({
                            width: Math.round(rx * boundx) + 'px',
                            height: Math.round(ry * boundy) + 'px',
                            marginLeft: '-' + Math.round(rx * c.x) + 'px',
                            marginTop: '-' + Math.round(ry * c.y) + 'px'
                        });
                    }
                };
            });
        </script>
    </head>
    <body>
        <div class="article">   
            <img src="<?php echo $uploadStoragePath.$_SESSION['USER']['user_id'].'/'.$_SESSION['crop_me'];?>" id="target" />
            <br/>
            <h1>Preview:</h1>
            <div style="width:125px;height:125px;overflow:hidden;">
                <img src="<?php echo $uploadStoragePath.$_SESSION['USER']['user_id'].'/'.$_SESSION['crop_me'];?>" id="preview" alt="Preview" />
            </div>

            <form action="<?php echo $siteConfigUrl.'?view=crop_profile_picture'; ?>" method="POST" onsubmit="return checkCoords();">
                <input type="hidden" id="x" name="x" />
                <input type="hidden" id="y" name="y" />
                <input type="hidden" id="w" name="w" />
                <input type="hidden" id="h" name="h" />
                <input type="submit" value="Crop Image" />
            </form>
        </div>
    </body>
</html>

Answer 1

Last days I had the same problem. I use this to solve. I hope this works for you:

    if ($_SERVER['REQUEST_METHOD'] == 'POST')
     {
$targ_w = $_POST['w'];$targ_h = $_POST['h'];
$jpeg_quality = 100;
$image = $_POST['image'];
$dir = $_POST['rel'];
$imagen = $dir."/".$image;
$src = $imagen;
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);

//header('Content-type: image/jpeg');
imagejpeg($dst_r, $dir.'/crop_'.$image.'', $jpeg_quality);

exit;
    }

jQuery Jcrop and PHP not actually cropping the image in IE9 only?

Question

1 answers

solution1
0 2012-10-19 17:34:32

jQuery Jcrop and PHP not actually cropping the image in IE9 only?

Question

1 answers

solution1 0 2012-10-19 17:34:32

solution1
0 2012-10-19 17:34:32