README

Yii2 Image Cropper Input Widget

Cropper.js v4.0.0 - Bootstrap Cropper (recommended) (already included).

Features

Image Crop
Image Rotate
Image Flip
Image Zoom
Image Reset
Coordinates
Image Sizes Info
Base64 Data
Upload
Delete Img

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist potime/yii2-cropper-widget "dev-master"

or add

"potime/yii2-cropper-widget": "dev-master"

to the require section of your composer.json file.

Usage

Let's add into config in your main-local config file before return[]

Yii::setAlias('@uploadPath', realpath(dirname(__FILE__).'/../../uploads/'));

Let's add in your model file

public $_image;

public function rules()
{
    return [
        ['_image', 'safe'],
    ];
}

public function beforeSave($insert)
{
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $this->_image, $result)){

        $type = $result[2];
        $data = base64_decode(str_replace($result[1], '', $this->_image));
        $path = Yii::getAlias('@uploadPath') . '/';
        if (!is_dir($path)) {
            FileHelper::createDirectory($path, 0777);
        }
        $fileName= Yii::$app->security->generateRandomString() . '.' .$type;

        if (file_put_contents($path.$fileName, $data)) {
            // deleting old image
            if (!$this->isNewRecord && !empty($this->image)) {
                @unlink($path . $this->portrait);
            }

            // set new filename
            $this->image = $fileName;
        }
    }

    parent::beforeSave($insert);
}

Simple usage in _form file

 echo $form->field($model, '_image')->widget(\potime\cropper\Cropper::className(), [
        'label' => 'Select Image', 
        'imageUrl' => $model->_image,
        'cropperOptions' => [
            'width' => 255,
            'height' => 150,
            'preview' => [
                'width' => 255,
                'height' => 150,
            ],
        ],
]);

Advanced usage in _form file

 echo $form->field($model, '_image')->widget(\potime\cropper\Cropper::className(), [
    /*
     * elements of this widget
     *
     * buttonId          = #cropper-select-button-$uniqueId
     * previewId         = #cropper-result-$uniqueId
     * modalId           = #cropper-modal-$uniqueId
     * imageId           = #cropper-image-$uniqueId
     * inputChangeUrlId  = #cropper-url-change-input-$uniqueId
     * closeButtonId     = #close-button-$uniqueId
     * cropButtonId      = #crop-button-$uniqueId
     * browseInputId     = #cropper-input-$uniqueId // fileinput in modal
    */
    'uniqueId' => 'image_cropper', // will create automaticaly if not set
    // you can set image url directly
    // you will see this image in the crop area if is set
    // default null
    'imageUrl' => Yii::getAlias('@web/image.jpg'),

    'cropperOptions' => [
        'width' => 100, // must be specified
        'height' => 100, // must be specified
        // optional
        // url must be set in update action
        'preview' => [
            'url' => '', // (!empty($model->image)) ? Yii::getAlias('@uploadUrl/'.$model->image) : null
            'width' => 100, // must be specified // you can set as string '100%'
            'height' => 100, // must be specified // you can set as string '100px'
        ],
        // optional // default following code
        // you can customize 
        'buttonCssClass' => 'btn btn-primary',
        // optional // defaults following code
        // you can customize 
        // "zoom-in" => false hide button
        'icons' => [
            'browse' => '<i class="fa fa-image"></i>',
            'crop' => '<i class="fa fa-crop"></i>',
            'close' => '<i class="fa fa-crop"></i>',       
            'zoom-in' => '<i class="fa fa-search-plus"></i>',
            'zoom-out' => '<i class="fa fa-search-minus"></i>',
            'rotate-left' => '<i class="fa fa-rotate-left"></i>',
            'rotate-right' => '<i class="fa fa-rotate-right"></i>',
            'flip-horizontal' => '<i class="fa fa-arrows-h"></i>',
            'flip-vertical' => '<i class="fa fa-arrows-v"></i>',
            'move-left' => '<i class="fa fa-arrow-left"></i>',
            'move-right' => '<i class="fa fa-arrow-right"></i>',
            'move-up' => '<i class="fa fa-arrow-up"></i>',
            'move-down' => '<i class="fa fa-arrow-down"></i>',
            'reset' => '<i class="fa fa-refresh"></i>',
            'delete' => '<i class="fa fa-trash"></i>',
        ],
        // you can customize your upload options
        'uploadOptions'=>[
            'url'=>'/upload/base64-img',
            'response'=>'res.result.url'
        ]
    ],

    'modalOptions' => [
            'title' => 'Image Crop Editor', // Modal header Title
            
            'tips' => true, // default false
            'extendInfo' => true, // default false
            
            // optional // defaults following code
            // you can customize 
            'labels' => [ // default name
                'browse' => 'Browse',
                'crop' => 'Crop & Save',
                'close' => 'Colse',  
                'reset' => 'Reset',
                'delete' => 'Delete',
            ],
        ],

    // optional // defaults following code
    // you can customize 
    'label' => 'Select Image', 
    
    // optional // default following code
    // you can customize 
    'template' => '{button}{preview}',
 ]);

jsOptions[]

 echo $form->field($model, '_image')->widget(\potime\cropper\Cropper::className(), [
    'cropperOptions' => [
        'width' => 100, // must be specified
        'height' => 100, // must be specified
     ],
     'jsOptions' => [
        'pos' => View::POS_END, // default is POS_END if not specified
        'onClick' => 'function(event){
              // when click crop or close button 
              // do something 
        }'        
     ],
]);

Notes

You can set crop image directly with javascript

Sample:

$('button').click(function() {
   // #cropper-modal-$unique will show automatically when click the button
   
   // you must set uniqueId on widget
   $('#cropper-url-change-input-' + uniqueId).val('image.jpeg').trigger('change');   
});

Thx

bilginnet.

crazykun.

potime / yii2-cropper-widget

Maintainers

Details