Yii 1.1: jcropzoom

crop , rotate, resize image easily with this widget
16 followers

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...

Total 1 comment

#8852 report it
ramdani at 2012/07/04 12:13am
Can't Crop in Linux

In Windows server is works but when I upload to linux server. It couldn't crop

Leave a comment

Please to leave your comment.

Create extension