README

Croppic 是一个用于图片裁剪的 jQuery 插件。

• Github - https://github.com/sconsult/croppic
• 官方网站 - http://www.croppic.net/

安装

建议通过 composer 安装扩展。

只需在控制台运行以下命令

php composer.phar require --prefer-dist wise5lin/yii2-croppic "*"

或在您的 composer.json 文件的 require 部分

"wise5lin/yii2-croppic": "*"

添加以下内容

使用

安装扩展后，您可以在代码中使用它

use wise5lin\croppic\Croppic;

<?= Croppic::widget([
    'options' => [
        'class' => 'croppic',
    ],
    'pluginOptions' => [
        'uploadUrl' => $model->urlUpload,
        'cropUrl' => $model->urlCrop,
        'cropData' => [
            // Динамическое задание пути для сохранения изображения.
            'path' => '@frontend/web/img/user/avatar/'.$model->id,
            // Динамическое задание URL для сохранения изображения.
            'url' => '/img/user/avatar/'.$model->id,
        ],
        'modal' => false,
        'doubleZoomControls' => false,
        'enableMousescroll' => true,
        'loaderHtml' => '<div class="loader bubblingG">
            <span id="bubblingG_1"></span>
            <span id="bubblingG_2"></span>
            <span id="bubblingG_3"></span>
        </div> ',
    ]
]) ?>

上传和裁剪图片

public function behaviors()
{
    return [
        'verbs' => [
            'class' => VerbFilter::className(),
            'actions' => [
                'upload' => ['post'],
                'crop' => ['post'],
            ],
        ],
    ];
}

public function actions()
{
    return [
        /**
         * Загрузка изображения
         */
        'upload' => [
            'class' => 'wise5lin\croppic\actions\UploadAction',
            // Абсолютный путь к папке в которую будет сохранено изображение (временно).
            'tempPath' => '@frontend/web/img/temp',
            // URL адрес к папке в которую будет сохранено изображение (временно).
            'tempUrl' => 'img/temp/',
            // Правила проверки изображения.
            'validatorOptions' => [
                'checkExtensionByMimeType' => true,
                'extensions' => 'jpeg, jpg, png',
                'maxSize' => 3000000,
                'tooBig' => 'Выбранное вами изображение слишком большое (макс. 3мб)',
            ],
        ],
        /**
         * Обрезка изображения
         */
        'crop' => [
            'class' => 'wise5lin\croppic\actions\CropAction',
            // Абсолютный путь к папке в которую будет сохранено изображение.
            'path' => '@frontend/web/img/user/avatar',
            // URL адрес к папке в которую будет сохранено изображение.
            'url' => 'img/user/avatar/',
        ],
    ];
}

额外功能

要使用额外功能，您需要将模型类的对象传递给操作

public function beforeAction($action)
{
    if ($action->id === 'upload' || $action->id === 'crop') {
        if ($action->hasProperty('model')) {
            $action->model = $this->findModel(Yii::$app->request->get('id'));
        }
    }

    if (!parent::beforeAction($action)) {
        return false;
    }

    return true;
}

使用 RBAC 检查用户对页面的访问权限

传递操作 权限 和 RBAC 参数

public function actions()
{
    return [
        /**
         * Загрузка изображения
         */
        'upload' => [
            'class' => 'wise5lin\croppic\actions\UploadAction',
            'tempPath' => '@frontend/web/img/temp',
            'tempUrl' => 'img/temp/',
            'validatorOptions' => [
                'checkExtensionByMimeType' => true,
                'extensions' => 'jpeg, jpg, png',
                'maxSize' => 3000000,
                'tooBig' => 'Выбранное вами изображение слишком большое (макс. 3мб)',
            ],
            // Разрешение RBAC
            'permissionRBAC' => 'updateProfile',
            // Параметр RBAC
            'parameterRBAC' => 'profile',
        ],
        /**
         * Обрезка изображения
         */
        'crop' => [
            'class' => 'wise5lin\croppic\actions\CropAction',
            'path' => '@frontend/web/img/user/avatar',
            'url' => 'img/user/avatar/',
            // Разрешение RBAC
            'permissionRBAC' => 'updateProfile',
            // Параметр RBAC
            'parameterRBAC' => 'profile',
        ],
    ];
}

检查方式： Yii::$app->user->can('updateProfile', ['profile' => $this->model]).

将图片路径或名称保存到数据库

public function actions()
{
    return [
        /**
         * Обрезка изображения
         */
        'crop' => [
            'class' => 'wise5lin\croppic\actions\CropAction',
            'path' => '@frontend/web/img/user/avatar',
            'url' => 'img/user/avatar/',
            'modelAttribute' => 'avatar', // <--- пример №1
            'modelScenario' => 'saveAvatar', // <--- пример №2
            'modelAttributeSavePath' => false, // <--- пример №3
        ],
    ];
}

传递操作 crop

• 模型属性的名称 将用于保存（示例 #1）。
• 模型场景 用于检查输入数据（示例 #2）。
• 如果只需要保存图片名称，则将 modelAttributeSavePath 参数设置为 false（示例 #3）。