Yii 1.1: jcrop

Easily add image cropping functionality
46 followers

Add image cropping functionality to your Yii application using the Jcrop jQuery cropping tool.

This extension adds a simple way to optionally use start, cancel, and apply buttons. Also provides a PHP class to handle a crop request sent via AJAX.

This extension is not yet finished, while it is completely usable as-is we will be improving it as our needs dictate. Your contributions are welcome.

Requirements

Yii 1.1.8 or above (due to Jquery version), GD support.

Usage

Extract to your extensions folder.

View file code

Allows the user to select an area of an existing image using the Jcrop widget. The extension also creates the hidden text fields to record the cropping coordinates.

Optionally, you may specify to also create buttons for controlling the widget (start, cancel & apply). If you do not use these buttons you will also need to create the javascript for sending out the AJAX request.

$this->widget('ext.jcrop.EJcrop', array(
    //
    // Image URL
    'url' => $this->createAbsoluteUrl('/path/to/full/image.jpg'),
    //
    // ALT text for the image
    'alt' => 'Crop This Image',
    //
    // options for the IMG element
    'htmlOptions' => array('id' => 'imageId'),
    //
    // Jcrop options (see Jcrop documentation)
    'options' => array(
        'minSize' => array(50, 50),
        'aspectRatio' => 1,
        'onRelease' => "js:function() {ejcrop_cancelCrop(this);}",
    ),
    // if this array is empty, buttons will not be added
    'buttons' => array(
        'start' => array(
            'label' => Yii::t('promoter', 'Adjust thumbnail cropping'),
            'htmlOptions' => array(
                'class' => 'myClass',
                'style' => 'color:red;' // make sure style ends with « ; »
            )
        ),
        'crop' => array(
            'label' => Yii::t('promoter', 'Apply cropping'),
        ),
        'cancel' => array(
            'label' => Yii::t('promoter', 'Cancel cropping')
        )
    ),
    // URL to send request to (unused if no buttons)
    'ajaxUrl' => 'controller/ajaxcrop',
    //
    // Additional parameters to send to the AJAX call (unused if no buttons)
    'ajaxParams' => array('someParam' => 'someValue'),
));

Controller code

You will need to create a controller action that handles the AJAX request.

When the cropper class is initialized, set the directory for saving the thumbnails. All subsequent calls will use the same path (for example in a loop).

Generally you will want to make the thumbnails directory a sub-directory of your full size directory. Thumbnails will have the same name as the parent image, so do not use the same directory for both !!

Yii::import('ext.jcrop.EJCropper');
$jcropper = new EJCropper();
$jcropper->thumbPath = '/my/images/thumbs';
 
// some settings ...
$jcropper->jpeg_quality = 95;
$jcropper->png_compression = 8;
 
// get the image cropping coordinates (or implement your own method)
$coords = $jcropper->getCoordsFromPost('idOrAttributeName');
 
// returns the path of the cropped image, source must be an absolute path.
$thumbnail = $jcropper->crop('/my/images/imageToCrop.jpg', $coords);

Resources

Total 20 comments

#17466 report it
Lalitesh at 2014/06/17 08:14am
Upgrade the version

This latest version is not compatible for jquery > 1.8 Manually updating the js and css creates UI issue.

#17051 report it
Lalitesh at 2014/04/29 02:30am
How to set aspect ratio

I want to change the aspect ratio of tracker from square to auto. What is the solution.

#15787 report it
Samir IZZA at 2013/12/17 04:20am
re: On PNG upload transparent background becomes black

I am trying to fix the PNG transparency, but I didn't find where I'll put

$('#target').Jcrop({}) set bgColor : 'transparent'

Can you help me please!

#15425 report it
RahulSM at 2013/11/08 08:35am
On PNG upload transparent background becomes black

To solve this issue do 2 things:

  1. In javascript function call
$('#target').Jcrop({}) set bgColor : 'transparent'
  1. In EJCropper.php and function crop()
$dest_r = imagecreatetruecolor($this->targ_w, $this->targ_h);
        /******* Add these 2 lines maintain transparency of PNG images ****/
        imagealphablending( $dest_r, false );
        imagesavealpha( $dest_r, true );
        /********end*********/
#13635 report it
yiiadict at 2013/06/12 11:59pm
Cant work ...

Hi,,, i add into my project , i i run this is error messages.

Undefined index: getCoordsFromPost _x ??

how to get the image cropping coordinates (or implement your own method) $coords = $jcropper->getCoordsFromPost('idOrAttributeName'); ???

Thanks.

#13228 report it
Renaud at 2013/05/16 09:44am
Reinitialise the javascript

I am showing the EJCrop widget inside a CJuiDialog. It works fine the first time, but the second time the dialog is shown the javascript (ejcrop_initWithButtons) of EJCrop is not initialised properly and I cannot crop. Any idea how to handle this issue? I've tried Yii::app()->clientScript->scriptMap['ejcrop.js'] = false; but without success. Any idea?

#12385 report it
nirmalroka at 2013/03/17 04:39pm
i didnot worked for me

it does not crop and image get blured, does any idea what had happened all is working, and all is same as stated above.

#10321 report it
sirin k at 2012/10/19 08:26am
Can i make the drag handler circular?

Can i make the drag handler circular? since i need a circular croping.please let me know if it is possible.

-Sirin

#10308 report it
sirin k at 2012/10/18 11:56am
it wasnt worked with normal url format

It wasnt worked with normal ajaxUrl='controller/action' But when did with

'ajaxUrl' => Yii::app()->createAbsoluteUrl('site/docrop')

It worked.

-Sirin

#9043 report it
dfortun at 2012/07/16 05:48am
IMAGE URL

This code

...
'url' => $this->createAbsoluteUrl('/path/to/full/image.jpg'),
...

creates an url like http://localhost/jcrop/index.php?r=images/DSC04753.JPG, and it does not show my image. Obviously, this is not the my image URL. How do I fix this?

#6178 report it
ianaré at 2011/12/16 03:35pm
Re: Too Specific

Yes, I understand in some cases you may want to do things not covered by the extension. Flexibility vs ease of use is always a give and take ...

There is the jii-jcrop extension which is supposed to be more minimal.

However, if you want to make some modifications to JS code that would make it more flexible, this would be greatly appreciated and I will be sure to include it in the release.

#6083 report it
memsis at 2011/12/10 05:01pm
Too specific

Why putting online an extension made for a specific use ?

I went trought your JS code. For what you're using it for, it must be great. If we're not using it as you do, we're doomed ;-)

You should try to keep your project specific code in your own project, not in the extension...

Example : in ejcrop.js, the ejcrop_initWithButtons function don't give out any flexibility on the ajax request result... and it should.

Pretty sure this is not the only place where the extension fail at giving flexibility to developpers...

Good work. I may only have a too specific use to do with jcrop ;-) lol

#5518 report it
Charger at 2011/10/18 03:00am
Need callback function

I need define my own JS function why must be called after jCrop do "crop".

#5505 report it
ianaré at 2011/10/17 08:33am
re: JS error

Thanks, the instructions have been updated with your corrections. I don't understand your question though, can you be a little more specific ?

#5400 report it
Charger at 2011/10/09 02:58pm
JS error

I cath JS error when use example code and press on button "cancel":

Uncaught exception: ReferenceError: Undefined variable: cancelCrop

Maybee need replace

'onRelease' => "js:function() {cancelCrop(this);}",

to

'onRelease' => "js:function() {ejcrop_cancelCrop(this);}",

and in controller need use absolute path

$base= Yii::app()->basePath;
$thumbnail = $jcropper->crop($base.'/my/images/imageToCrop.jpg', $coords); //for /protected/my/images.....

How I can set my action for buttons?

#5260 report it
ianaré at 2011/09/27 09:26am
Thanks

Bug has been fixed in latest release, thanks !

#5035 report it
Kiriakos Kappa Krastillis at 2011/09/08 11:40am
jcrop or Jcrop?

In my download the EJcrop file registers following script:

"jQuery('#{$id}').jcrop({$options});";

But the JQuery object in the .js files is Jcrop not jcrop. so I changed the capitalization to Jcrop in the above line to get this to work

#4669 report it
ianaré at 2011/08/02 09:54am
Description updated

Thanks, forgot to add that bit. When I updated to Yii 1.1.8, the extension also had to be updated.

#4616 report it
heyhoo at 2011/07/26 02:22pm
Yii Version

Note that you need to run version 1.1.8 to get this work. I was using Yii framework 1.1.7 and it doesn't work on that version. Probably because in version 1.1.8 the jQuery library is updated.

#4594 report it
ianaré at 2011/07/25 04:30am
CSS added

I was using a custom CSS for my application, so did not include it. But you're right that for a general use extension it's much better to have the default CSS, so this has been added in the latest version.

Leave a comment

Please to leave your comment.

Create extension