1. Requirements
2. Usage
3. Resources

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 ¶

• Try out a demo
• Report a bug
• Version History