README

基于 Bootstrap4 的 Yii2 Cropper

cropperjs 的包装器。cropperjs.

安装

安装此扩展的首选方式是通过 composer。

运行以下命令之一

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

或者在您的 composer.json 文件的 require 部分添加以下内容

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

到

使用方法

在您的模型中需要添加以下代码

    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);
    }

在视图文件中的简单使用

use sabirov\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();

在视图文件中的高级使用

use sabirov\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 属性

cropperOptions 请参考 cropperjs 选项.