Crop and rotate images with JS and PHP

Question

Having been Googling for a tool for a few days, I have found nothing apart from Kroppr but there's no way I can commit to using a tool that can't be tested locally before deployment.

All I need is something that can provide the facility for a user to crop and rotate an image, and have the server save it, overriding the original image. There seems to be plenty of cropping tools out there but nothing that can rotate as well.

Is there such a tool?

Answer 1

I have also found another way to crop images using javascript and have the server to effect the changes. please check out this project on git. I am still testing it though, however, I will soon provide some code snippets, whenever I get it perfectly. Image Cropper

Answer 2

The answer above is really good, but you could take a look at

http://phpthumb.sourceforge.net/ - For croping

http://code.google.com/p/jqueryrotate/ - jQuery rotate (posted above)

These two worked good in all my projects

Answer 3

No one has answered this yet? Hmmm well I think you are going to have a hard time finding a tool that does exactly what you like. I imagine you are looking for something similar to Kroppr, but not tied to a service.

So here are some resources you can use to build one!

http://code.google.com/p/jqueryrotate/

http://raphaeljs.com/

Both of these look like pretty solid libraries that will let you rotate an image.

Use this in conjunction with a cropper. To display what the image will look like.

Now here is the sneaky part. You only need to keep track of 2 things.

1)The selected angle of rotation 0-360

2)The x1, y1, x2, y2 of the crop.

Once you have collected this data, make a call to a php script on your server and pass it the values of the image manipulation (angle, x1, y1, x2, y2) This can be done through a POST via ajax, form submission, or you can even use a GET and just directly send them as variables in the URL

Now do all of the image manipulation in PHP using GD.

<?php
//Incoming infomation. This should be set by $_GET[] or $_POST[] rather than the hardcoded examples.
$x1 = 100;
$y1 = 100;
$x2 = 400;
$y2 = 400;
$degrees = 47;
$filename = 'images/ducks.jpeg';

//find the original image size
$image_info = getimagesize($filename);
$original_width = $image_info[0];
$original_height = $image_info[1];

//calculat what the new image size should be.
$new_width = abs($x2 - $x1);
$new_height = abs($y2 - $y1);


$image_source = imagecreatefromjpeg($filename);

//rotate
$rotate = imagerotate($image_source, $degrees, 0);

//rotating an image changes the height and width of the image.
//find the new height and width so we can properly compensate when cropping.
$rotated_width = imagesx($rotate);
$rotated_height = imagesy($rotate);

//diff between rotated width & height and original width & height
//the rotated version should always be greater than or equal to the original size.
$dx = $rotated_width - $original_width;
$dy = $rotated_height - $original_width;

$crop_x = $dx/2 + $x1;
$crop_y = $dy/2 + $y1;


$new_image = imagecreatetruecolor($new_width, $new_height);

imagecopyresampled($new_image, $rotate, 0, 0, $crop_x, $crop_y, $new_width, $new_height, $new_width, $new_height);

//save over the old image.
imagejpeg($new_image, $filename);
?>

This is just a quick and dirty example for you to work off of. If you want this to work for image types other than jpeg you will need to do some checking and use the other methods of GD for handling .pngs or .gifs. The rotation and cropping code will remain the same.

The majority of tinkering left is now in the front-end, I will leave that up to you to decide. All you need to capture is a rotation angle and the x,y cropping points.

Hopefully this was helpful. If you need more help on the front-end stuff let me know.

p.s. I would post more links to resources, but apparently I am only allowed to post 2 because my reputation is not high enough yet.