1. Requirements
2. Usage
3. Resources

CropZoom is a plugin that let you select an area of an image and then crop it.

whit this tool you also will be able to zoom in or to zoom out, to drag and also rotate an image.

this widget just a wrapper for the original jquery plugin cropzoom Just another jQuery plugin

Requirements ¶

...requirements of using this extension (e.g. Yii 1.1 or above)...

Usage ¶

...how to use this extension...

download it and extract it to extensions dir or some other dir , then in the view file use it like other CWidget class;

this is your view file content (for me it is cropzoom.php)

/**
 *
 * User: yiqing
 * Date: 11-11-23
 */
$this->widget('ext.cropzoom.JCropZoom', array(
             'id' => 'cropZoom1',
           //'containerId'=>'crop_container1',
            'onServerHandled' => 'js:function(response){
                alert(response);
               //if server end give you an json string
              // use the $.parseJSON() to decode it !
               }',
            'image'=>array(
    // note if you didn't give an image source url will use the sample image for testing !                                                                  //  'source'=>'http://a1.att.hudong.com/11/11/01300000334334123287112954864.jpg'
                                                                   )
                                                              ));
?>
<div>
     <a href="javascript:;" onclick="cropZoom1.restore();">restore image</a>
</div>
<div id="examples">
    <div id="crop_container1"></div>

</div>

<p style="clear: both;"> just another example
 <h4>( some bug happens when you click the restore link , but take it easy just use one widget ,
                 you seldom use two instance in same view page !) ,may be the cropzoom original bug  </h4>
</p>
    <div>
        <p>
              <a href="javascript:;" id='cropTrigger'>crop image</a>
             <a href="javascript:;" onclick="cropZoom2.restore();">restore image</a>

        </p>
        <div id="crop_container2">
            the image will display here ...
        </div>
        <?php

$this->widget('ext.cropzoom.JCropZoom', 
                 array(
                    'id' => 'cropZoom2',
                    'callbackUrl'=>$this->createUrl('handleCropZoom'),
                    'containerId'=>'crop_container2',
                    'cropTriggerId'=>'cropTrigger',
                    'image'=>array(
               'source'=>'http://a1.att.hudong.com/11/11/01300000334334123287112954864.jpg'
                                                                   )
                                                              ));
?>
  </div>

in your controller you need write an action method to handle the crop ,rotate or resize operation :

public function actionCropZoom(){
        if(request()->getIsAjaxRequest()){
            //print_r($_POST);
            //die;
            Yii::import('ext.cropzoom.JCropZoom');
            $saveToFilePath = Yii::getPathOfAlias('webroot.assets').DIRECTORY_SEPARATOR .'cropZoomTest';
            JCropZoom::getHandler()->process($saveToFilePath,true)->process($saveToFilePath.'.jpeg');
            die($saveToFilePath);
        }

        $this->render('cropzoom');
    }

    /**
     * @return void
     */
     public function actionHandleCropZoom(){
        if(request()->getIsAjaxRequest()){
            //print_r($_POST);
            //die;
            Yii::import('ext.cropzoom.JCropZoom');
            $saveToFilePath = Yii::getPathOfAlias('webroot.assets').DIRECTORY_SEPARATOR .'cropZoomTest';
            JCropZoom::getHandler()->process($saveToFilePath,true)->process($saveToFilePath.'.jpeg');
            die('cropped file path : '.$saveToFilePath);
        }
    }

this is first release version so may have some bugs , if you find some bugs please let me know .

there are some options you can config please refer to the original website cropzoom doc

Resources ¶

...external resources for this extension...

• [Try out a demo](cropzoom Just another jQuery plugin)