Create image crop function for image editing

Question

AceJay 0 Newbie Poster

9 Years Ago

Hi,
I'm a begginer at php and I need to create a image editing tool in php.

I want to crop the image, display the cropped image next to the original and be able to resize, re-crop and replace the cropped image in the same location as previous cropped image, each time I click the 'crop' button.

I would be grateful if someone could kindly help me correct this to work.

Thank you.

P.S. Someone made a similar request to this a few months ago, however this is slightly different, and I am still struggling to make this work.

This is the html code:

<!DOCTYPE html> 
<head> 
<title>Image Crop - Old Version</title>
<link rel="stylesheet" href="style.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="index.js"></script> 
</head> 
<body> 
<div id="container"> 
    <img width="470" src="photo2-W470xH601.jpg" />
<div id="box"></div>

</div> <div id="output">
    <img id="changeable" src="" />
</div> 

<button id="crop_button">Crop</button> 

</body> 
</html>

This is the jquery / javascript code, 'index.js':

// JavaScript Document

$(document).ready(function(){

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

    $(document).on('click', '#crop_button', function(){

        var top = $('#box').position().top;
        var left = $('#box').position().left;
        var width = $('#box').width();
        var height = $('#box').height();

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

        $.post('crop.php', {top:top, left:left, width:width, height:height}, function(){

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

        });

    });


});

This is the PHP code for 'crop.php':

<?php ob_start(); // top of the page

$dst_x = 0;     // Leaving zero X margin when cropping
$dst_y = 0;     // Leaving zero Y margin when cropping
$src_x = $_POST['left'];    // Crop Start X
$src_y = $_POST['top'];     // Crop Start Y
$dst_w = $_POST['width'];   // Thumb width
$dst_h = $_POST['height'];  // Thumb height
$src_w = $_POST['width'];   // $src_x + $dst_w
$src_h = $_POST['height'];  // $src_y + $dst_h

$dst_image = imagecreatetruecolor($dst_w, $dst_h);
//$src_image = imagecreatefromjpeg("IMAG0278.jpg");
$src_image = imagecreatefromjpeg("photo2-W470xH601.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");

ob_flush(); // at the end of the page
?>

image php

Edited 9 Years Ago by AceJay because: correction

2 Contributors
6 Replies
766 Views
16 Hours Discussion Span
Latest Post 9 Years Ago Latest Post by AceJay

diafol

9 Years Ago

OK, so where's it going wrong for you?

diafol

9 Years Ago

No, that makes sense. OK. Not really my area, but...

You're storing this cropped image as new.jpg every time. That's overwriting the physical file in your directory, but the '#changeable' image is seeing no change to the src as you're replacing new.jpg with new.jpg.

This is probably not that useful anyway since if you had more than one user cropping an image, then they would overwrite each other's crops. One way around this would be to rename the image with a unix timestamp. If you have a number of users, then the chances of this crop being overwritten is very small, but still possible, so you could name a file thus:

$filename = $_SESSION['user_id'] . '_' . time() . '.jpg';

You can then send the filename back to the ajax script in order to re-populate the src attribute.

     $.post('crop.php', {top:top, left:left, width:width, height:height}, function(data){
        $('#changeable').attr('src', data);
     });

And:

$filename = $_SESSION['user_id'] . '_' . time() . '.jpg';
imagejpeg($dst_image, $filename);
echo $filename;

Knowing the $_SESSION['user_id'] or whatever you're using to uniquely identify a user, you can then delete unwanted crops too.

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.

AceJay 0 Newbie Poster · Answer 1 · 2015-08-19T20:06:07+00:00

Hi, thanks for the reply.

It works fine the first time I click the 'crop' button. But once I resize and click the 'crop' button again to re-crop, it doesn't display the new re-cropped image (in place of the old cropped image).

I tested the output on the server -- when I re-crop the 'new.jpg' does change on the server (so re-crop has physically worked) but it isn't replacing and displaying the previous cropped image with the newly cropped one.

Hope that makes sense?

AceJay 0 Newbie Poster · Answer 2 · 2015-08-20T06:43:36+00:00

Hi and thanks for the reply Manus.

I have tried what you have suggested, creating uniquely named jpeg files, but now even the initial cropped image that was displayed when I initially click the 'crop' button is no longer displaying. This along with further clicking of the 'crop' button still does not display the newly cropped image(s). (However, the newly cropped unique images are being created on the server).

I can still do with some help in getting this to work.

I've added this to the <head> section of 'index.php':

<?php
session_start();
$filename = $_SESSION['filename'];
echo '<br/>$filename: '.$filename;
?>
<script>
    var data = <?php echo json_encode($filename); ?>; 
</script>

The Javascript file, 'index.js' now looks like this:

// JavaScript Document
$(document).ready(function(){

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

    $(document).on('click', '#crop_button', function(){
        //$('#crop_button').on('click', function(){
        var top = $('#box').position().top;
        var left = $('#box').position().left;
        var width = $('#box').width();
        var height = $('#box').height();

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

        alert('Data: ' + data);

        $.post('crop.php', {top:top, left:left, width:width, height:height}, function(data){
            $('#changeable').attr('src', data);

        }); // end of $.post()

    });

});

And 'crop.php' now looks like this:

<?php 
ob_start(); // top of the page
session_start();

$dst_x = 0;     // Leaving zero X margin when cropping
$dst_y = 0;     // Leaving zero Y margin when cropping
$src_x = $_POST['left'];    // Crop Start X
$src_y = $_POST['top'];     // Crop Start Y
$dst_w = $_POST['width'];   // Thumb width
$dst_h = $_POST['height'];  // Thumb height
$src_w = $_POST['width'];   // $src_x + $dst_w
$src_h = $_POST['height'];  // $src_y + $dst_h

$dst_image = imagecreatetruecolor($dst_w, $dst_h);
$src_image = imagecreatefromjpeg("photo2-W470xH601.jpg");

imagecopyresampled($dst_image, $src_image, $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h, $src_w, $src_h);

$user_id = 1; // decided to give user_id a fixed value for now
$_SESSION['filename'] =  $user_id.'_'.time().'.jpg';

$filename = $_SESSION['filename'];
imagejpeg($dst_image, $filename);

ob_flush(); // at the end of the page
?>

diafol · Answer 3 · 2015-08-20T11:54:42+00:00

You haven't put in the echo $filename; so the javascript can't replace the src data. See my previous post.

AceJay 0 Newbie Poster · Answer 4 · 2015-08-20T12:50:48+00:00

Duh! Thanks!

echo'd the filename, but that still didn't quite solve it.

I added - window.location.reload(); - to the javascript page and it appears to work now.

Thank you for your help Manus, much appreciated.