Upload Image after cropping

Hi all,

I want to let the user crop the image before uploading.

Model Rule:

array(‘image’, ‘file’, ‘types’=>‘jpg, gif, png’,‘allowEmpty’=>true),


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

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:


  • 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.





 * 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);





	//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?