Crop image

Question

PF2G 0 Junior Poster in Training

11 Years Ago

Hi,

i want to crop an image that i upload, then the image appears behind a div where i drag and choose what i want and crop it. Here's what i want after the upload:

the black background is the background-color of the body, the image inside the red border is what i want to crop.

Click Here

Here's the code i have (without the upload of the image):

        <style>
        body{margin:0; padding:0; background-color:#000;}
        .demo{margin:auto; width:600px; z-index:-10;}
        .draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
        #containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; z-index:10;}
        #draggable4{border:none; background:none; z-index:-1;}
        #square{border:2px solid #FFF; z-index:-10;}
        </style>
        <script>
        $(function() {
            $( "#draggable" ).draggable({ axis: "y" });
            $( "#draggable2" ).draggable({ axis: "x" });

            $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
            $( "#draggable4" ).draggable({ containment: "#demo-frame" });
            $( "#draggable5" ).draggable({ containment: "parent" });
        });
        </script>
    </head>
    <body>
        <div id="square">
            <div class="demo">
                <div id="containment-wrapper">
                    <div id="draggable4" class="draggable ui-widget-content">
                        <img src="../images/img.jpg" width="800" />
                    </div>
                </div>
            </div><!-- End demo -->
        </div>
    </body>

My problem is that i can't put the image in front of the div #demo and behind the #square.
Hope you can help me.

Thank you,
PF2G

javascript

Edited 11 Years Ago by PF2G

2 Contributors
16 Replies
1K Views
1 Week Discussion Span
Latest Post 11 Years Ago Latest Post by PF2G

iamthwee

11 Years Ago

I think your logic is backwards where you are trying to drag an image into the crop section.

It would be better to drag the crop section OVER the image.

Something like jcrop would be a good place to start.

http://deepliquid.com/projects/Jcrop/demos.php

Edited 11 Years Ago by iamthwee

iamthwee

11 Years Ago

In that case I think it is just a case of working out where the coord of the box sit over the original image. Then you could use a server-side lang to crop the image.

In terms of dragging elements under/over another I would say to look into pointer events, but this fails on internet explorer. So I would fire off an event in jquery

iamthwee

11 Years Ago

Returning back to the original question I think Jcrop is NOT for you.

What I would do is create the rectangle as a transparent png inside a div. So the rectange would be the cut out on a transparent png.

http://stackoverflow.com/questions/13048186/drag-image-below-another-image-using-jquery-draggable

Then you upload an image and drag it behind taking note of the absolute coords of the image underneath.

x1, x2, y1, y2...

With these coords known you can then crop the image as intended using php

http://www.johnconde.net/blog/cropping-an-image-with-php-and-the-gd-library/

Those two links should do exactly what you intend it to do. As mentioned before avoid the use of pointer events because this does not work in internet explorer.

If you require further help then I can post up a more complete example.

Edited 11 Years Ago by iamthwee

iamthwee

11 Years Ago

I'll have a look at it tonight...bit busy at the mo.

Things to check before:

1) Just try isolating the php crop script from the rest of your code to make sure nothing else is interfering.
2) Check you GD installed on your server. The code requires the GD library which comes as standard on 90% of server setups.
3) Make sure the image file is in the same directory as the php crop script and the names are correct (upper and lower case match)

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

PF2G 0 Junior Poster in Training · Answer 1 · 2013-07-26T09:53:19+00:00

I know that but i want the "oposite", moving the image instead.

Is that possible?

PF2G 0 Junior Poster in Training · Answer 2 · 2013-07-29T09:54:10+00:00

I did it:

<?php
        if(isset($_POST['cropar'])){
            //crop and save image selected
        }
    ?>

    <html>
        <head>
            <meta http-equiv="Content-type" content="text/html; charset=utf-8">
            <title>JCrop - Crop simples</title>
            <script type="text/javascript" src="js/jquery.min.js"></script>
            <script type="text/javascript" src="js/jquery.Jcrop.js"></script>
            <link rel="stylesheet" href="css/exemplo.css" type="text/css" />
            <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

            <link type="text/css" media="screen" rel="stylesheet" href="jquery.crop.css">
            <style type="text/css">
                body {
                    font-family : sans-serif;
                    font-size   : 13px;
                }
                .results {
                    font-family : monospace;
                    font-size   : 20px;
                }
                .cropFrame {
                    border : 4px solid black;
                }
            </style>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="jquery.crop.js"></script>
            <script type="text/javascript" defer>
                $( function () {
                    $( '.crop' ).each( function () {
                        var image     = $( this )
                            , results = image.next( '.results' )
                            , x       = $( '.cropX', results )
                            , y       = $( '.cropY', results )
                            , w       = $( '.cropW', results )
                            , h       = $( '.cropH', results )
                            , crop    = image
                                .crop( {
                                    width      : 400
                                    , height   : 300
                                    , loading  : 'Hello World'
                                } )
                                .on( 'crop', function( event ) {
                                    x.text( event.cropX );
                                    y.text( event.cropY );
                                    w.text( event.cropW );
                                    h.text( event.cropH );
                                } )
                                .data( 'crop' );
                        image
                            //.on( 'dblclick', $.proxy( crop.zoomIn, crop ) )
                            .on( 'mousewheel', function ( event ) {
                                return event.originalEvent.wheelDelta < 0 ? 
                                    crop.zoomIn() :
                                    crop.zoomOut();
                            } );
                    } );
                } );
            </script>


        </head>
        <body>

            <?php

                // memory limit (nem todo server aceita)
                ini_set("memory_limit","50M");
                set_time_limit(0);

                // processa arquivo
                $imagem     = isset( $_FILES['imagem'] ) ? $_FILES['imagem'] : NULL;
                $tem_crop   = false;
                $img        = '';
                if( $imagem['tmp_name'] )
                {
                    $imagesize = getimagesize( $imagem['tmp_name'] );
                    if( $imagesize !== false )
                    {
                        if( move_uploaded_file( $imagem['tmp_name'], $imagem['name'] ) )
                        {
                            include( 'm2brimagem.class.php' );
                            $oImg = new m2brimagem( $imagem['name'] );
                            if( $oImg->valida() == 'OK' )
                            {
                                $imagesize  = getimagesize( $imagem['name'] );
                                $img        = '<img src="'.$imagem['name'].'" id="jcrop" '.$imagesize[3].' class="crop" />';
                                $tem_crop   = true; 
                            }
                        }
                    }
                }
            ?>

            <?php if( $tem_crop === true ): ?>
                <h2 id="tit-jcrop">Recorte a imagem</h2>
                <div id="div-jcrop">
                    <form action="" method="post" style="border:1px solid #000;">
                        <?php echo $img; ?>

                        <input type="submit" value="Salvar" name="cropar" id="btn-crop" />

                        <input type="hidden" id="codigoImagem" name="codigoImagem"/>
                    </form>
                </div>
                <script type="text/javascript">
                    var img = '<?php echo $imagem['name']; ?>';

                    $(function(){
                        $('#jcrop').Jcrop({
                            onChange: exibePreview,
                            onSelect: exibePreview,
                            aspectRatio: 1
                        });
                        $('#btn-crop').click(function(){
                            $.post( 'crop.php', {
                                img:img, 
                                x: $('#x').val(), 
                                y: $('#y').val(), 
                                w: $('#w').val(), 
                                h: $('#h').val()
                            }, function(){
                                $('#div-jcrop').html( '<img src="' + img + '?' + Math.random() + '" width="'+$('#w').val()+'" height="'+$('#h').val()+'" />' );
                                $('#debug').hide();
                                $('#tit-jcrop').html('Feito!<br /><a href="index.php">enviar outra imagem</a>');
                            });
                            return false;
                        });
                    });
                </script>
            <?php else: ?>
                <form name="frm-jcrop" id="frm-jcrop" method="post" action="index.php" enctype="multipart/form-data">
                    <p>
                        <label>Envie uma imagem:</label>
                        <input type="file" name="imagem" id="imagem" />
                        <input type="submit" value="Enviar" />
                    </p>
                </form>
            <?php endif; ?>

        </body>
    </html>

i just want to crop the image inside the div with PHP. Can you help me?

PF2G 0 Junior Poster in Training · Answer 3 · 2013-07-29T17:31:14+00:00

Other thing, is that something that i can do to make the <div id="div-jcrop"> customize as iphone4/4s, iphone5, tablet and mac? (space to cut the camera and the apple parts)

Thanks for your help.

PF2G 0 Junior Poster in Training · Answer 4 · 2013-07-31T14:12:13+00:00

I can't crop the image, can you help me?

it gives me no error or anything... nothing happens

<?php
    if(isset($_POST['cropar'])){
        // Original image
        $filename = 'someimage.jpg';

        // Get dimensions of the original image
        list($current_width, $current_height) = getimagesize($filename);

        // The x and y coordinates on the original image where we
        // will begin cropping the image
        $left = 50;
        $top = 50;

        // This will be the final size of the image (e.g. how many pixels
        // left and down we will be going)
        $crop_width = 200;
        $crop_height = 200;

        // Resample the image
        $canvas = imagecreatetruecolor($crop_width, $crop_height);
        $current_image = imagecreatefromjpeg($filename);
        imagecopy($canvas, $current_image, 0, 0, $left, $top, $current_width, $current_height);
        imagejpeg($canvas, $filename, 100);
    }
?>

<!DOCTYPE html>
<html>
    <head>
        <title>jWindowCrop</title>
        <link href="jWindowCrop.css" media="screen" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.jWindowCrop.js"></script>
        <style type="text/css">
        body {
        font-family:sans-serif;
        font-size:13px;
        }

        #results {
        font-family:monospace;
        font-size:20px;
        }

        /* over ride defaults */
        .jwc_frame {
        border:5px solid black;
        } .jwc_controls {
        height:24px;
        } .jwc_zoom_in, .jwc_zoom_out {
        display:block; background-color:transparent;
        cursor:pointer;
        width:16px; height:16px;
        float:right; margin:4px 4px 0px 0px;
        text-decoration:none; text-align:center;
        font-size:16px; font-weight:bold; color:#000;
        } .jwc_zoom_in {
        background-image:url(images/round_plus_16.png);
        } .jwc_zoom_out {
        background-image:url(images/round_minus_16.png);
        } .jwc_zoom_in::after {
        content:"";
        } .jwc_zoom_out::after {
        content:"";
        }
        </style>
    </head>
    <body>
        <form action="" method="post">
            <img id="target3" class="crop_me" alt="" src="images/dock.jpg" />

            <div id="results" style="display:hidden;">
                <b>X</b>:<span id="crop_x"> </span><br />
                <b>Y</b>:<span id="crop_y"> </span><br />
                <b>W</b>:<span id="crop_w"> </span><br />
                <b>H</b>:<span id="crop_h"> </span><br />
            </div>

            <script type="text/javascript">
                $(function() {
                    $('.crop_me').jWindowCrop({
                        targetWidth: 400,
                        targetHeight: 300,
                        loadingText: 'hello world',
                        onChange: function(result) {
                            $('#crop_x').text(result.cropX);
                            $('#crop_y').text(result.cropY);
                            $('#crop_w').text(result.cropW);
                            $('#crop_h').text(result.cropH);
                        }
                    });
                });
            </script>


            <input type="submit" value="Crop" name="cropar" />
        </form>
    </body>
</html>

iamthwee · Answer 5 · 2013-07-31T21:26:15+00:00

OK I just tried the php script for image resizing and it worked. I can only assume this part of your function is failing:

if(isset($_POST['cropar'])){

Therefore the script works exactly as intended now.

iamthwee · Answer 6 · 2013-07-31T21:53:39+00:00

Ok I'm attaching the files just incase, it should create a new image called crop.jpg in the same folder.
The file you need to run from localhost is demo.html.

Run from you webserver, or localhost. Make sure you change the directory permissions so the files are writeable. That's about the only thing.

PF2G 0 Junior Poster in Training · Answer 7 · 2013-08-01T13:57:57+00:00

Thank you very much, it's working fine :)

Can you help me with one more thing, please? :S

I added an upload system, so i can upload the image and then crop it. But when i do the cropping the cropped image is black:

<?php 
error_reporting(0);
$change="";
$abc="";

define ("MAX_SIZE","2048");

function getExtension($str){
    $i = strrpos($str,".");
    if (!$i) { return ""; }
    $l = strlen($str) - $i;
    $ext = substr($str,$i+1,$l);
    return $ext;
}

$errors=0;
if($_SERVER["REQUEST_METHOD"] == "POST"){
    $image =$_FILES["file"]["name"];
    $uploadedfile = $_FILES['file']['tmp_name'];
    if ($image){
        $filename = stripslashes($_FILES['file']['name']);
        $extension = getExtension($filename);
        $extension = strtolower($extension);    

        if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif")){
            $change='<div class="msgdiv">Unknown Image extension </div> ';
            $errors=1;
        }
        else{
            $size=filesize($_FILES['file']['tmp_name']);
            if ($size > MAX_SIZE*1024){
                $change='<div class="msgdiv">You have exceeded the size limit!</div> ';
                $errors=1;
            }
            if($extension=="jpg" || $extension=="jpeg" ){
                $uploadedfile = $_FILES['file']['tmp_name'];
                $src = imagecreatefromjpeg($uploadedfile);
            }
            else if($extension=="png"){
                $uploadedfile = $_FILES['file']['tmp_name'];
                $src = imagecreatefrompng($uploadedfile);
            }
            else{
                $src = imagecreatefromgif($uploadedfile);
            }

            echo $scr;
            list($width,$height)=getimagesize($uploadedfile);

            $tmp=imagecreatetruecolor($width,$height);

            imagecopyresampled($tmp,$src,0,0,0,0,$width,$height,$width,$height);

            /** EXTRACT IMAGE EXTENSION **/
                $ext = explode('.', $filename);
            /** EXTRACT IMAGE EXTENSION **/

            $file = "images/". sha1($ext[0]).'_original.'.$ext[1];

            imagejpeg($tmp,$file,100);
            imagedestroy($src);
            imagedestroy($tmp);
        }
    }
}
//If no errors registred, print the success message
if(!$errors){
    // mysql_query("update {$prefix}users set img='$big',img_small='$small' where user_id='$user'");
    $change=' <div class="msgdiv">Image Uploaded Successfully!</div>';
}
?>


<!DOCTYPE html>
<html>
    <head>
        <title>jWindowCrop</title>
        <link href="jWindowCrop.css" media="screen" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.jWindowCrop.js"></script>
        <style type="text/css">
        body {
        font-family:sans-serif;
        font-size:13px;
        }

        #results {
        font-family:monospace;
        font-size:20px;
        }

        /* over ride defaults */
        .jwc_frame {
        border:5px solid black;
        } .jwc_controls {
        height:24px;
        } .jwc_zoom_in, .jwc_zoom_out {
        display:block; background-color:transparent;
        cursor:pointer;
        width:16px; height:16px;
        float:right; margin:4px 4px 0px 0px;
        text-decoration:none; text-align:center;
        font-size:16px; font-weight:bold; color:#000;
        } .jwc_zoom_in {
        background-image:url(images/round_plus_16.png);
        } .jwc_zoom_out {
        background-image:url(images/round_minus_16.png);
        } .jwc_zoom_in::after {
        content:"";
        } .jwc_zoom_out::after {
        content:"";
        }
        </style>
    </head>


    <body>
        <img id="target3" class="crop_me" alt="" src=" <?php echo $file; ?>" />
        <div id="results" style="display:none;">
            <b>X</b>:<span id="crop_x"> </span><br />
            <b>Y</b>:<span id="crop_y"> </span><br />
            <b>W</b>:<span id="crop_w"> </span><br />
            <b>H</b>:<span id="crop_h"> </span><br />
        </div>
        <input id="save" type="submit">
        <script type="text/javascript">
            $(function() {
                $('.crop_me').jWindowCrop({
                    targetWidth: 400,
                    targetHeight: 300,
                    loadingText: 'hello world',
                    onChange: function(result) {
                        $('#crop_x').text(result.cropX);
                        $('#crop_y').text(result.cropY);
                        $('#crop_w').text(result.cropW);
                        $('#crop_h').text(result.cropH);
                    }
                });
            });

            $('#save').click(function() 
            {
                $.ajax({
                    url: 'crop.php',
                    type: 'POST',
                    data: { 
                        x:$('#crop_x').text(),
                        y:$('#crop_y').text(),
                        w:$('#crop_w').text(),
                        h:$('#crop_h').text()

                          },
                    success: function(data) {

                        alert('crop successful');
                    }
                });

            }); /*End save function*/
        </script>

        <!-- FORM UPLOAD -->
        <form method="post" action="" enctype="multipart/form-data" name="form1">
            <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <Td style="height:25px">&nbsp;</Td>
                </tr>

                <tr>
                    <td width="150">
                        <div align="right" class="titles">Picture: </div>
                    </td>

                    <td width="350" align="left">
                        <div align="left">
                            <input size="25" name="file" type="file" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt" class="box"/>
                        </div>
                    </td>
                </tr>

                <tr>
                    <Td></Td>
                    <Td valign="top" height="35px" class="help">Image maximum size <b>400 </b>kb</span></Td>
                </tr>

                <tr>
                    <Td></Td>
                    <Td valign="top" height="35px"><input type="submit" id="mybut" value="       Upload        " name="Submit"/></Td>
                </tr>

                <tr>
                    <td width="200">&nbsp;</td>
                    <td width="200">
                        <table width="200" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="200" align="center"><div align="left"></div></td>
                                <td width="100">&nbsp;</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </form>
        <!-- FORM UPLOAD -->
    </body>
</html>

Thank you.
PF2G

PF2G 0 Junior Poster in Training · Answer 8 · 2013-08-01T14:59:16+00:00

INDEX.PHP

<?php 
error_reporting(0);
$change="";
$abc="";

define ("MAX_SIZE","2048");

function getExtension($str){
    $i = strrpos($str,".");
    if (!$i) { return ""; }
    $l = strlen($str) - $i;
    $ext = substr($str,$i+1,$l);
    return $ext;
}

$errors=0;
if($_SERVER["REQUEST_METHOD"] == "POST"){
    $image =$_FILES["file"]["name"];
    $uploadedfile = $_FILES['file']['tmp_name'];
    if ($image){
        $filename = stripslashes($_FILES['file']['name']);
        $extension = getExtension($filename);
        $extension = strtolower($extension);    

        if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif")){
            $change='<div class="msgdiv">Unknown Image extension </div> ';
            $errors=1;
        }
        else{
            $size=filesize($_FILES['file']['tmp_name']);
            if ($size > MAX_SIZE*2048){
                $change='<div class="msgdiv">You have exceeded the size limit!</div> ';
                $errors=1;
            }
            if($extension=="jpg" || $extension=="jpeg" ){
                $uploadedfile = $_FILES['file']['tmp_name'];
                $src = imagecreatefromjpeg($uploadedfile);
            }
            else if($extension=="png"){
                $uploadedfile = $_FILES['file']['tmp_name'];
                $src = imagecreatefrompng($uploadedfile);
            }
            else{
                $src = imagecreatefromgif($uploadedfile);
            }

            echo $scr;
            list($width,$height)=getimagesize($uploadedfile);

            $tmp=imagecreatetruecolor($width,$height);

            imagecopyresampled($tmp,$src,0,0,0,0,$width,$height,$width,$height);

            /** EXTRACT IMAGE EXTENSION **/
                $ext = explode('.', $filename);
            /** EXTRACT IMAGE EXTENSION **/

            $file = "images/". sha1($ext[0]).'_original.'.$ext[1];

            imagejpeg($tmp,$file,100);
            imagedestroy($src);
            imagedestroy($tmp);
        }
    }
}
//If no errors registred, print the success message
if(!$errors){
    // mysql_query("update {$prefix}users set img='$big',img_small='$small' where user_id='$user'");
    $change=' <div class="msgdiv">Image Uploaded Successfully!</div>';
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title>jWindowCrop</title>
        <link href="jWindowCrop.css" media="screen" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.jWindowCrop.js"></script>
        <style type="text/css">
        body {
        font-family:sans-serif;
        font-size:13px;
        }

        #results {
        font-family:monospace;
        font-size:20px;
        }

        /* over ride defaults */
        .jwc_frame {
        border:5px solid black;
        } .jwc_controls {
        height:24px;
        } .jwc_zoom_in, .jwc_zoom_out {
        display:block; background-color:transparent;
        cursor:pointer;
        width:16px; height:16px;
        float:right; margin:4px 4px 0px 0px;
        text-decoration:none; text-align:center;
        font-size:16px; font-weight:bold; color:#000;
        } .jwc_zoom_in {
        background-image:url(images/round_plus_16.png);
        } .jwc_zoom_out {
        background-image:url(images/round_minus_16.png);
        } .jwc_zoom_in::after {
        content:"";
        } .jwc_zoom_out::after {
        content:"";
        }
        </style>
    </head>


    <body>
        <div id="crop_image">
            <img id="target3" class="crop_me" alt="" src="<?php echo $file ?>" />
            <div id="results" style="display:none;">
                <b>X</b>:<span id="crop_x"> </span><br />
                <b>Y</b>:<span id="crop_y"> </span><br />
                <b>W</b>:<span id="crop_w"> </span><br />
                <b>H</b>:<span id="crop_h"> </span><br />
            </div>
            <input id="save" type="submit">
            <script type="text/javascript">
                $(function() {
                    $('.crop_me').jWindowCrop({
                        targetWidth: 400,
                        targetHeight: 300,
                        loadingText: 'Crop Image',
                        onChange: function(result) {
                            $('#crop_x').text(result.cropX);
                            $('#crop_y').text(result.cropY);
                            $('#crop_w').text(result.cropW);
                            $('#crop_h').text(result.cropH);
                        }
                    });
                });

                $('#save').click(function() 
                {
                    $.ajax({
                        url: 'crop.php?img=<?php echo $filename; ?>',
                        type: 'POST',
                        data: { 
                            x:$('#crop_x').text(),
                            y:$('#crop_y').text(),
                            w:$('#crop_w').text(),
                            h:$('#crop_h').text()

                              },
                        success: function(data) {
                            alert('Imagem cortada com sucesso');
                            $("crop_image").parent().hide();
                        }
                    });

                }); /*End save function*/
            </script>
        </div>

        <!--
        <div id="cropped">
            <img id="target3" class="crop_me" alt="" src=" <?php echo $file; ?>" />
        </div>
        -->


        <!-- FORM UPLOAD -->
        <form method="post" action="" enctype="multipart/form-data" name="form1">
            <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <Td style="height:25px">&nbsp;</Td>
                </tr>

                <tr>
                    <td width="150">
                        <div align="right" class="titles">Picture: </div>
                    </td>

                    <td width="350" align="left">
                        <div align="left">
                            <input size="25" name="file" type="file" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt" class="box"/>
                        </div>
                    </td>
                </tr>

                <tr>
                    <Td></Td>
                    <Td valign="top" height="35px"><input type="submit" id="mybut" value="Upload" name="Submit"/></Td>
                </tr>

                <tr>
                    <td width="200">&nbsp;</td>
                    <td width="200">
                        <table width="200" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="200" align="center"><div align="left"></div></td>
                                <td width="100">&nbsp;</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </form>
        <!-- FORM UPLOAD -->
    </body>
</html>

CROP.PHP

<?php
    $x = $_POST['x'];
    $y = $_POST['y'];
    $w = $_POST['w'];
    $h = $_POST['h'];

    // Original image
    $img = $_GET['img'];
    // Get dimensions of the original image
    list($current_width, $current_height) = getimagesize($img);
    // The x and y coordinates on the original image where we
    // will begin cropping the image
    $left = $x;
    $top = $y;
    // This will be the final size of the image (e.g. how many pixels
    // left and down we will be going)
    $crop_width = $w;
    $crop_height = $h;
    // Resample the image
    $canvas = imagecreatetruecolor($crop_width, $crop_height);
    $current_image = imagecreatefromjpeg($img);
    imagecopy($canvas, $current_image, 0, 0, $left, $top, $current_width, $current_height);
    imagejpeg($canvas, "images/".sha1($img)."_crop.jpg", 100);
?>

iamthwee · Answer 9 · 2013-08-01T16:17:22+00:00

Can you upload your files as a zip for me to test?

Otherwise just looking at it, it is probably turning black because it crop.php needs to change to handle pngs and gif extensions. I see you've changed the code for index.php but it would need to change in crop.php too.

PF2G 0 Junior Poster in Training · Answer 10 · 2013-08-02T10:12:30+00:00

PF2G 0 Junior Poster in Training

11 Years Ago

Here it is.

Thank you for your help ;)

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

playground.zip (10.13 KB)

Edited 11 Years Ago by PF2G

iamthwee · Answer 11 · 2013-08-02T11:09:53+00:00

This appears to work and for png and gifs as well. I'm not quite sure why because it wouldn't appear like it should work. Not sure.Maybe you have to be a little bit careful for transparent pngs I guess?

PF2G 0 Junior Poster in Training · Answer 12 · 2013-08-02T11:56:29+00:00

Hey man, thank you very very much.

You made my day ;)