Yii 1.1: jii-jcrop

A lightweight jCrop Yii extension with crop preview support
23 followers

This extension offers a non-intrusive Yii extension that allows you to use the JCrop jQuery plugin in your Yii project. Unlike other extensions, yii-jcrop does NOT auto-insert the form fields and buttons for you, which in many cases might not be what you want anyway. This extension focuses on the minimum required to get you up and running, letting you do your own bells and whistles if you want to. This project is not a fork of the JCrop Extension

Optionally, this extension supports a preview of the cropped image which will be dynamically updated as you move the selection rectangle.

Screenshot

Screenshot

Requirements

Yii 1.1 or above, GD or Imagick support for your serverside cropping code

Usage

Copy/extract the yii-jcrop folder into your protected/extensions/ directory. This is an example view that uses the widget:

<?php echo CHtml::errorSummary($form); ?> 
    <?=CHtml::beginForm(null, 'POST')?>
    <? //$form in this example is of type AvatarForm, containing variables for the crop area's x, y, width and height, hence the corresponding widget form element parameters ?>
    <?=CHtml::activeHiddenField($form, 'cropID');?>
    <?=CHtml::activeHiddenField($form, 'cropX', array('value' => '0'));?>
    <?=CHtml::activeHiddenField($form, 'cropY', array('value' => '0'));?>
    <?=CHtml::activeHiddenField($form, 'cropW', array('value' => '100'));?>
    <?=CHtml::activeHiddenField($form, 'cropH', array('value' => '100'));?>
    <?$previewWidth = 100; $previewHeight = 100;?>
    <?$this->widget('ext.yii-jcrop.jCropWidget',array(
        'imageUrl'=>$imageUrl,
        'formElementX'=>'AvatarForm_cropX',
        'formElementY'=>'AvatarForm_cropY',
        'formElementWidth'=>'AvatarForm_cropW',
        'formElementHeight'=>'AvatarForm_cropH',
        'previewId'=>'avatar-preview', //optional preview image ID, see preview div below
        'previewWidth'=>$previewWidth,
        'previewHeight'=>$previewHeight,
        'jCropOptions'=>array(
            'aspectRatio'=>1, 
            'boxWidth'=>400,
            'boxHeight'=>400,
            'setSelect'=>array(0, 0, 100, 100),
        ),
    )
    );
    ?>
 
    <!-- Begin optional preview box -->
    <div style="position:relative; overflow:hidden; width:<?=$previewWidth?>px; height:<?=$previewHeight?>px; margin-top: 10px; margin-bottom: 10px;">
    <img id="avatar-preview" src="<?=$imageUrl?>" style="width: 0px; height: 0px; margin-left: 0px; margin-top: 0px;">
    </div>
    <!-- End optional preview box -->
 
    <?=CHtml::submitButton('Crop Avatar'); ?>
    <?=CHtml::endForm()?>

You are free to use any jCrop parameter in the jCropOptions array. This plugin works with model-based forms as well as plain forms. If you specify javascript callback function names in a jCrop-parameter, don't forget to start them with "js:"

If you don't want a preview image, just leave out the preview parameters and the associated DIV.

Resources

Total 5 comments

#13634 report it
yiiadict at 2013/06/12 11:50pm
NOT WORK !! Help me please...

HI... cant work, this is error messages " Undefined index: idOrAttributeName_x "

**$coords = $jcropper->getCoordsFromPost('idOrAttributeName'); **

idOrAttributeName is null /not set ...

How to set idOrAttributeName ????

Thanks.

#10358 report it
Tpoxa at 2012/10/22 07:26pm
Short tags

Thanks for the extension

Do not use short tags, please

#10320 report it
sirin k at 2012/10/19 08:24am
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

#9130 report it
roadrunner at 2012/07/23 12:32am
Step by step

Will you make it a step by step on how to embed it and run.Also how to insert it DB?

#4513 report it
Sergey Tsivin at 2011/07/15 06:49am
A minor bug in the js code

This code doesn't work as expected:

if ($('#{$this->previewId}') != undefined) {

although I have no preview, jquery returns an object, not an undefined value.

Replacing with the following code fixes the issue.

if ($('#{$this->previewId}').length > 0) {

Leave a comment

Please to leave your comment.

Create extension