Create image crop function for image editing tool.

[skthree]

Hi,
I need to create a image editing tool in php. I'm begginer to the php.
I tried it in 'javascript' but I need it to create it in php. my javascript
code also didn't work(crop box is didn't work properly even it didn't move). I have no idea to how to do it.
So that i need your help to do that correct.
I want to crop the image and replace the image at the same place.
Please be kindly help me for create that.

Thank you.
p.s. here is my js code.I'm sure the code was not help for you guys to help me for that case.

$(document).ready(function() {
    $('#box').darggable({containment:'#container'});
    $('#box').resizable({containment:'#container'});
    $('#crop').click(function(){
        var top = $('#box').position().top;
        var left = $('#box').position().left;
        var width = $('#box').position().width;
        var height = $('#box').position().height;

        alert('Top' + top + 'Left' + left + 'Width' + width + 'Height' + height);
        });
}); 

[diafol]

Please be kindly help me for create that.

You need to show us something, otherwise it's us doing all the work for you.

However, you need to use send the positions to PHP (via submit or Ajax). ALso:

 $('#box').darggable({containment:'#container'});

should be:

 $('#box').draggable({containment:'#container'});

You can use the GD2 library (http://php.net/manual/en/function.imagecrop.php and http://php.net/manual/en/function.imagecopyresized.php), which should be included in your PHP install) or ImageMagick (http://php.net/manual/en/imagick.cropimage.php) to crop the file.

[skthree]

Thank you sir for your response for my case.

This is the code that I did for my image editing tool, but I want to create crop the image and replace the image at the same place.
But in this code is crop the image and display it in another palce.

<?php

    error_reporting (E_ALL ^ E_NOTICE);
    session_start();
    if (!isset($_SESSION['random_key']) || strlen($_SESSION['random_key'])==0){
        $_SESSION['random_key'] = strtotime(date('Y-m-d H:i:s')); //assign the timestamp to the session variable
        $_SESSION['user_file_ext']= "";
    }
    $upload_dir = "upload_pic";                 // The directory for the images to be saved in
    $upload_path = $upload_dir."/";             // The path to where the image will be saved
    $large_image_prefix = "resize_";            // The prefix name to large image
    $thumb_image_prefix = "thumbnail_";         // The prefix name to the thumb image
    $large_image_name = $large_image_prefix.$_SESSION['random_key'];     // New name of the large image (append the timestamp to the filename)
    $thumb_image_name = $thumb_image_prefix.$_SESSION['random_key'];     // New name of the thumbnail image (append the timestamp to the filename)
    $max_file = "3";                            // Maximum file size in MB
    $max_width = "500";                         // Max width allowed for the large image
    $thumb_width = "100";                       // Width of thumbnail image
    $thumb_height = "100";                      // Height of thumbnail image
    // Only one of these image types should be allowed for upload
    $allowed_image_types = array('image/pjpeg'=>"jpg",'image/jpeg'=>"jpg",'image/jpg'=>"jpg",'image/png'=>"png",'image/x-png'=>"png",'image/gif'=>"gif");
    $allowed_image_ext = array_unique($allowed_image_types); // do not change this
    $image_ext = "";    // initialise variable, do not change this.
    foreach ($allowed_image_ext as $mime_type => $ext) {
        $image_ext.= strtoupper($ext)." ";
    }

    function resizeImage($image,$width,$height,$scale) {
        list($imagewidth, $imageheight, $imageType) = getimagesize($image);
        $imageType = image_type_to_mime_type($imageType);
        $newImageWidth = ceil($width * $scale);
        $newImageHeight = ceil($height * $scale);
        $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
        switch($imageType) {
            case "image/gif":
                $source=imagecreatefromgif($image); 
                break;
            case "image/pjpeg":
            case "image/jpeg":
            case "image/jpg":
                $source=imagecreatefromjpeg($image); 
                break;
            case "image/png":
            case "image/x-png":
                $source=imagecreatefrompng($image); 
                break;
        }
        imagecopyresampled($newImage,$source,0,0,0,0,$newImageWidth,$newImageHeight,$width,$height);

        switch($imageType) {
            case "image/gif":
                imagegif($newImage,$image); 
                break;
            case "image/pjpeg":
            case "image/jpeg":
            case "image/jpg":
                imagejpeg($newImage,$image,90); 
                break;
            case "image/png":
            case "image/x-png":
                imagepng($newImage,$image);  
                break;
        }

        chmod($image, 0777);
        return $image;
    }

    function resizeThumbnailImage($thumb_image_name, $image, $width, $height, $start_width, $start_height, $scale){
        list($imagewidth, $imageheight, $imageType) = getimagesize($image);
        $imageType = image_type_to_mime_type($imageType);

        $newImageWidth = ceil($width * $scale);
        $newImageHeight = ceil($height * $scale);
        $newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
        switch($imageType) {
            case "image/gif":
                $source=imagecreatefromgif($image); 
                break;
            case "image/pjpeg":
            case "image/jpeg":
            case "image/jpg":
                $source=imagecreatefromjpeg($image); 
                break;
            case "image/png":
            case "image/x-png":
                $source=imagecreatefrompng($image); 
                break;
        }
        imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
        switch($imageType) {
            case "image/gif":
                imagegif($newImage,$thumb_image_name); 
                break;
            case "image/pjpeg":
            case "image/jpeg":
            case "image/jpg":
                imagejpeg($newImage,$thumb_image_name,90); 
                break;
            case "image/png":
            case "image/x-png":
                imagepng($newImage,$thumb_image_name);  
                break;
        }
        chmod($thumb_image_name, 0777);
        return $thumb_image_name;
    }

    function getHeight($image) {
        $size = getimagesize($image);
        $height = $size[1];
        return $height;
    }

    function getWidth($image) {
        $size = getimagesize($image);
        $width = $size[0];
        return $width;
    }

    //Image Locations
    $large_image_location = $upload_path.$large_image_name.$_SESSION['user_file_ext'];
    $thumb_image_location = $upload_path.$thumb_image_name.$_SESSION['user_file_ext'];


    if(!is_dir($upload_dir)){
        mkdir($upload_dir, 0777);
        chmod($upload_dir, 0777);
    }


    if (file_exists($large_image_location)){
        if(file_exists($thumb_image_location)){
            $thumb_photo_exists = "<img src=\"".$upload_path.$thumb_image_name.$_SESSION['user_file_ext']."\" alt=\"Thumbnail Image\"/>";
        }else{
            $thumb_photo_exists = "";
        }
        $large_photo_exists = "<img src=\"".$upload_path.$large_image_name.$_SESSION['user_file_ext']."\" alt=\"Large Image\"/>";
    } else {
        $large_photo_exists = "";
        $thumb_photo_exists = "";
    }

    if (isset($_POST["upload"])) { 
        //Get the file information
        $userfile_name = $_FILES['image']['name'];
        $userfile_tmp = $_FILES['image']['tmp_name'];
        $userfile_size = $_FILES['image']['size'];
        $userfile_type = $_FILES['image']['type'];
        $filename = basename($_FILES['image']['name']);
        $file_ext = strtolower(substr($filename, strrpos($filename, '.') + 1));

        //Only process if the file is a JPG, PNG or GIF and below the allowed limit
        if((!empty($_FILES["image"])) && ($_FILES['image']['error'] == 0)) {

            foreach ($allowed_image_types as $mime_type => $ext) {
                //loop through the specified image types and if they match the extension then break out
                //everything is ok so go and check file size
                if($file_ext==$ext && $userfile_type==$mime_type){
                    $error = "";
                    break;
                }else{
                    $error = "Only <strong>".$image_ext."</strong> images accepted for upload<br />";
                }
            }
            //check if the file size is above the allowed limit
            if ($userfile_size > ($max_file*1048576)) {
                $error.= "Images must be under ".$max_file."MB in size";
            }

        }else{
            $error= "Select an image for upload";
        }
        //Everything is ok, so we can upload the image.
        if (strlen($error)==0){

            if (isset($_FILES['image']['name'])){
                //this file could now has an unknown file extension (we hope it's one of the ones set above!)
                $large_image_location = $large_image_location.".".$file_ext;
                $thumb_image_location = $thumb_image_location.".".$file_ext;

                //put the file ext in the session so we know what file to look for once its uploaded
                $_SESSION['user_file_ext']=".".$file_ext;

                move_uploaded_file($userfile_tmp, $large_image_location);
                chmod($large_image_location, 0777);

                $width = getWidth($large_image_location);
                $height = getHeight($large_image_location);
                //Scale the image if it is greater than the width set above
                if ($width > $max_width){
                    $scale = $max_width/$width;
                    $uploaded = resizeImage($large_image_location,$width,$height,$scale);
                }else{
                    $scale = 1;
                    $uploaded = resizeImage($large_image_location,$width,$height,$scale);
                }
                //Delete the thumbnail file so the user can create a new one
                if (file_exists($thumb_image_location)) {
                    unlink($thumb_image_location);
                }
            }
            //Refresh the page to show the new uploaded image
            header("location:".$_SERVER["PHP_SELF"]);
            exit();
        }
    }

    if (isset($_POST["upload_thumbnail"]) && strlen($large_photo_exists)>0) {
        //Get the new coordinates to crop the image.
        $x1 = $_POST["x1"];
        $y1 = $_POST["y1"];
        $x2 = $_POST["x2"];
        $y2 = $_POST["y2"];
        $w = $_POST["w"];
        $h = $_POST["h"];
        //Scale the image to the thumb_width set above
        $scale = $thumb_width/$w;
        $cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);
        //Reload the page again to view the thumbnail
        header("location:".$_SERVER["PHP_SELF"]);
        exit();
    }


    if ($_GET['a']=="delete" && strlen($_GET['t'])>0){
    //get the file locations 
        $large_image_location = $upload_path.$large_image_prefix.$_GET['t'];
        $thumb_image_location = $upload_path.$thumb_image_prefix.$_GET['t'];
        if (file_exists($large_image_location)) {
            unlink($large_image_location);
        }
        if (file_exists($thumb_image_location)) {
            unlink($thumb_image_location);
        }
        header("location:".$_SERVER["PHP_SELF"]);
        exit(); 
    }
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <title>Image crop</title>
        <script type="text/javascript" src="js/jquery-pack.js"></script>
        <script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
    </head>
    <body>

    <?php
    //Only display the javacript if an image has been uploaded
    if(strlen($large_photo_exists)>0){
        $current_large_image_width = getWidth($large_image_location);
        $current_large_image_height = getHeight($large_image_location);?>
    <script type="text/javascript">
    function preview(img, selection) { 
        var scaleX = <?php echo $thumb_width;?> / selection.width; 
        var scaleY = <?php echo $thumb_height;?> / selection.height; 

        $('#thumbnail + div > img').css({ 
            width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px', 
            height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
            marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
            marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
        });
        $('#x1').val(selection.x1);
        $('#y1').val(selection.y1);
        $('#x2').val(selection.x2);
        $('#y2').val(selection.y2);
        $('#w').val(selection.width);
        $('#h').val(selection.height);
    } 

    $(document).ready(function () { 
        $('#save_thumb').click(function() {
            var x1 = $('#x1').val();
            var y1 = $('#y1').val();
            var x2 = $('#x2').val();
            var y2 = $('#y2').val();
            var w = $('#w').val();
            var h = $('#h').val();
            if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
                alert("You must make a selection first");
                return false;
            }else{
                return true;
            }
        });
    }); 

    $(window).load(function () { 
        $('#thumbnail').imgAreaSelect({ aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>', onSelectChange: preview }); 
    });

    </script>
    <?php }?>
    <h1>Photo Upload and Crop</h1>
    <?php
    //Display error message if there are any
    if(strlen($error)>0){
        echo "<ul><li><strong>Error!</strong></li><li>".$error."</li></ul>";
    }
    if(strlen($large_photo_exists)>0 && strlen($thumb_photo_exists)>0){
        echo $large_photo_exists."&nbsp;".$thumb_photo_exists;
        echo "<p><a href=\"".$_SERVER["PHP_SELF"]."?a=delete&t=".$_SESSION['random_key'].$_SESSION['user_file_ext']."\">Delete images</a></p>";
        echo "<p><a href=\"".$_SERVER["PHP_SELF"]."\">Upload another</a></p>";
        //Clear the time stamp session and user file extension
        $_SESSION['random_key']= "";
        $_SESSION['user_file_ext']= "";
    }else{
            if(strlen($large_photo_exists)>0){?>
            <h2>Create Thumbnail</h2>
            <div align="center">
                <img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
                <div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:<?php echo $thumb_width;?>px; height:<?php echo $thumb_height;?>px;">
                    <img src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" style="position: relative;" alt="Thumbnail Preview" />
                </div>
                <br style="clear:both;"/>
                <form name="thumbnail" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
                    <input type="hidden" name="x1" value="" id="x1" />
                    <input type="hidden" name="y1" value="" id="y1" />
                    <input type="hidden" name="x2" value="" id="x2" />
                    <input type="hidden" name="y2" value="" id="y2" />
                    <input type="hidden" name="w" value="" id="w" />
                    <input type="hidden" name="h" value="" id="h" />
                    <input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" />
                </form>
            </div>
        <hr />
        <?php    } ?>
        <h2>Upload Photo</h2>
        <form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
        Photo <input type="file" name="image" size="30" /> <input type="submit" name="upload" value="Upload" />
        </form>
    <?php } ?>
    </body>
    </html>

[diafol]

Ok, that's a lot of php and markup and js mixed up. Difficult to follow. Attempt to separate your techs as far as possible.

SO

PHP file - image editing script - only

HTML file - just markup - container for image with refs to jQ (with plugins)

JS file - just code to send positions/dimensions to PHP file via AJax)

[skthree]

Thank you sir for your kindly and quick advices. I will arrange my code this manner.

[skthree]

I want to know about my code, image editing tool's crop function. please tell me what's the wrong with this code.

1.This is the html code and it's include 'main2.css' file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/main2.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="js/editTool2.js"></script>
<title>PhotoSmarter</title>
</head>
<body>

<table width="645">
          <tr>
            <td width="375" height="38" rowspan="6">
            <div id="container">
        <img src="images/1.jpg" width="377" height="290" />
        <div id="box"></div>
        </div>
        <div id="output" </div>
</td>
            <td width="258" height="39"><p><img src="images/crop-256x256.png" alt="" width="35" height="33" /></p>
              <button id="crop">Crop</button> 

1. This is the javascript code 'editTool2.js'

   $(document).ready(function() {
       $('#box').darggable({containment:'#container'});
       $('#box').resizable({containment:'#container'});
       $('#crop').click(function(){
           var top = $('#box').position().top;
           var left = $('#box').position().left;
           var width = $('#box').width();
           var height = $('#box').height();
   
   
           $.post('crop.php', {top:top, left:left, width:width, height:height}, function(){ 
           $('#output').html('<img src=new.jpg />');
               });
           });
   }); 
   

2. And this is the php code 'crop.php'

   <?php 
   
   $dst_x = 0;
   $dst_y = 0;
   $src_x = $_POST['left']; //crop start x
   $src_y = $_POST['top']; //start y
   $dst_w = $_POST['width']; //thumb width
   $dst_h = $_POST['height']; //thumb height
   $src_w = $_POST['width']; //x+w
   $src_h = $_POST['height']; //y+h
   
   $dst_image = imagecreatetruecolor($dst_w,$dst_h);
   $src_image = imagecreatefromjpeg("images/1.jpg");
   imagecopyresampled($dst_image, $src_image, $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h);
   imagejpeg($dst_image, "new.jpg");
   
   ?>
   

can you please check this code. it's not working for me.Sadly my early code also not working.
I want to crop the image and replace it in same place. But this code is crop the image and save it in another place.

[diafol]

Change:

<img src="images/1.jpg" width="377" height="290" />

To:

 <img src="images/1.jpg" id="changeable" width="377" height="290" />   

And:

 $('#output').html('<img src=new.jpg />');

To:

$('#changeable').attr('src', 'new.jpg');

Perhaps you'll need to change the width and length too - but you already have that data from the input.

[skthree]

ok thank you. I'll try it