jcrop Follow @yiiframework

Easily add image cropping functionality

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 18 comments

#13228

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

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

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

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

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

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

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

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

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

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);}",

'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

ianaré at 2011/09/27 09:26am

Thanks

Bug has been fixed in latest release, thanks !

#5035

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

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

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

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.

#4510

Sergey Tsivin at 2011/07/15 02:40am

jCrop css is not included into archive

I noticed that jCrop css is not included into archive, is that on purpose?

#4355

ianaré at 2011/06/28 09:03am

my bad

Yes, sorry about that.

I realized there was a major problem with the extension right before I was about to release. This has been fixed now and I will be making a fully working package available for download.

#4341

wisp at 2011/06/27 03:24pm

no downloadable files?

kinda hard to try it out :)

Please login to leave your comment.