Hi all,
I want to let the user crop the image before uploading.
Model Rule:
array(‘image’, ‘file’, ‘types’=>‘jpg, gif, png’,‘allowEmpty’=>true),
View:
CHtml::activeFileField($model, ‘image’); ?>
I came across jumploader-java-uploader and jcrop. But not sure it will fit into my case.
I would be happy to get some pointers here.
I’m not yet allowed to embed links, so apologies in advance for not linking things, but here goes…
When I had to do this, I used a combination of
jQuery
Ajax Upload (valums.com/ajax-upload/)
imgAreaSelect (odyniec.net/projects/imgareaselect/), and
PHP’s GD library (php.net/manual/en/book.image.php) - make sure this is available on your server
Basically it went like this:
user uploaded file (make sure to modify the PHP server code that comes with ajax-upload to put your uploads in the correct place, and double-check your permissions on that directory).
on upload complete:
[list]
update the ‘file’ field (a hidden activeTextField for the filename) with the filename of the uploaded file
pop up an overlay with a ‘crop’ button and the newly uploaded image; call imgAreaSelect.
imgAreaSelect has nice callbacks that I used to update hidden form fields with the coordinates of the top-left and bottom-right handles of the area to be cropped. When the user hit crop, it would submit the form to the php file below, which would crop it, save it to the correct place, and return, replacing the ajax file uploader with the newly cropped image.
[/list]
cropImage.php
<?php
/**
* Takes a bunch of get parameters -- listed below -- and crops the file at $filename
*/
$filename = $_POST['filename']; //the filename
$filetype = strtolower($_POST['filetype']); //the filetype; important to lowercase so it doesn't choke on .JPG instead of .jpg, for example
$xCoord = $_POST['xCoord']; /* these two fields are the (x,y) coordinates */
$yCoord = $_POST['yCoord']; /* of the top left corner of our new image */
$width = $_POST['width']; // width of the cropped area
$height = $_POST['height']; // height of the cropped area
$path = '/images/';
/* if we don't have to crop - because the image size is the same as crop height & width
* - then don't crop; just copy the file
*/
$imageSize = getimagesize($path.'uploads/'.$filename);
if( $width === $imageSize[0] && $height === $imageSize[1] ) {
copy($path.'uploads/'.$filename, $path.$filename);
} else {
//convert post to PHP resource
if ($filetype == 'jpeg' || $filetype == 'jpg') {
$img = imagecreatefromjpeg($path.'uploads/'.$filename);
} else if ($filetype == 'gif') {
$img = imagecreatefromgif($path.'uploads/'.$filename);
} else if ($filetype == 'png') {
$img = imagecreatefrompng($path.'uploads/'.$filename);
}
//create a new PHP image object to hold the cropped image, and crop the image
$newImage = imagecreatetruecolor($width, $height);
imagecopyresampled($newImage, $img, 0, 0, $xCoord, $yCoord, $width, $height, $width, $height);
//convert the PHP image object to a .png file
imagepng($newImage, $path.$filename, 0);
//cleanup
imagedestroy($img);
imagedestroy($newImage);
}
//return the filename
echo $filename;
?>
I don’t pretend this is an optimal way to do things, but it’s a way that worked for me. It is also nice in that it separates the file uploading from the record creation; while handling file upload with Yii is totally doable, it’s kind of a pain. Hopefully it will get you started though.
Of course, if anyone has improvements to this, I would wholeheartedly welcome them!
Dear Joshua,
Thanks for explaining in detail, I will try to use your method.
Hello. I am quite interested in finding out if it did work. I am looking for a similar solution. Any learning to share?
Thanks!