README

Cropper for Yii2 which uses Bootstrap4.

Wrapper for cropperjs.

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require zpearl/yii2-bootstrap4-cropper

or add

"zpearl/yii2-bootstrap4-cropper": "^0.1.1"

to the require section of your composer.json file.

Usage

In your model you need to add the following code :

    public $_avatar;    // variable to get the picture

    public function rules()
    {
        return [
            ['_avatar', 'safe'],    // must be set to "safe"
        ];
    }
    
    public function beforeSave($insert)
    {
        if (is_string($this->_avatar) && strstr($this->_avatar, 'data:image')) {
            $uploadPath = Yii::getAlias('@web') . '/upload';    // set a directory to save picture
            $data = $this->_avatar;
            $data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $data));
            $fileName = Yii::$app->security->generateRandomString() . '.png';   // generate picture name
            file_put_contents($uploadPath . DIRECTORY_SEPARATOR . $fileName, $data);
        
            if (!empty($this->avatar)) {    // "avatar" model attribute which stores picture name
                unlink(Yii::getAlias($uploadPath . DIRECTORY_SEPARATOR . $this->avatar));   // delete old picture
            }
            
            $this->avatar = $fileName;  // set new picture name to attribute
        }

        return parent::beforeSave($insert);
    }

Simple usage in view file

use zpearl\cropper\Cropper;

$uploadPath = Yii::getAlias('@web') . '/upload';
$img_url = is_null($model->avatar) ? null : $uploadPath . DIRECTORY_SEPARATOR . $model->avatar;

$form = ActiveForm::begin();

echo $form->field($model, '_avatar')->widget(Cropper::class, [
    'previewImageUrl' => $img_url,  // if 'null' set url to no-image.svg
]);

echo Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']);

ActiveForm::end();

Advanced usage in view file

use zpearl\cropper\Cropper;

$uploadPath = Yii::getAlias('@web') . '/upload';
$img_url = is_null($model->avatar) ? null : $uploadPath . DIRECTORY_SEPARATOR . $model->avatar;

$form = ActiveForm::begin();

echo $form->field($model, '_avatar')->widget(Cropper::class, [
    'previewImageUrl' => $img_url,  // if 'null' set url to no-image.svg
    'extensionOptions' => [
        'preview' => [
            'width' => 270,
            'height' => 270
        ],
        'browseButtonText' => 'Выбрать',
        'cropButtonText' => 'Обрезать',
        'changeButtonText' => 'Изменить',
        'closeButtonText' => 'Закрыть',
        'cropperWarningText' => 'Двойной клик - переключение между перемещением изображения и выбором области обрезки.'
    ],
    'cropperOptions' => [
        'viewMode' => 1,
        'aspectRatio' => 1,
        'minContainerHeight' => 270,
        'minCropBoxHeight' => 270
    ]
]);

echo Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']);

ActiveForm::end();

extensionOptions properties:

cropperOptions see cropperjs options.