README

Croppic - 这是一个用于裁剪的 jQuery 插件。

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

调整

建议通过 composer 安装扩展。

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

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

或添加

"gudezi/yii2-croppic-widget": "*"

到 composer.json 文件的 require 部分。

使用

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

在视图表单中添加

    use gudezi\croppic\Croppic;

    $options = [
        'class' => 'croppic',
        'pathroot' => 'yiiBaseAdvanced/backend/web',
    ];
    $pluginOptions= [
        'uploadUrl' => '../upload-crop/upload',
        'cropUrl' => '../upload-crop/crop',
        '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> ',
    ];
    echo $form->field($model, 'urlUpload')->widget(Croppic::className(),
        ['options' => $options,'pluginOptions' => $pluginOptions]); 

创建用于上传和裁剪图像的控制器

namespace backend\controllers;

use Yii;
use yii\web\Controller;
use yii\web\NotFoundHttpException;
use yii\filters\VerbFilter;
use gudezi\croppic\actions\CropAction;
use gudezi\croppic\actions\UploadAction;

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

    public function actions()
    {
        return [
            'upload' => [
                'class' => 'gudezi\croppic\actions\UploadAction',
                'tempPath' => '@backend/web/img/temp',
                'tempUrl' => '../img/temp/',
                'validatorOptions' => [
                    'checkExtensionByMimeType' => true,
                    'extensions' => 'jpeg, jpg, png',
                    'maxSize' => 3000000,
                    'tooBig' => 'Ha seleccionado una imagen demasiado grande (máx. 3 MB)',
                ],
            ],
            'crop' => [
                'class' => 'gudezi\croppic\actions\CropAction',
                'path' => '@backend/web/img/user/avatar',
                'url' => '../img/user/avatar/',
                'modelAttribute' => 'urlUpload',
            ],
        ];
    }
}

以及使用模型数据

在视图表单中添加

    use gudezi\croppic\Croppic;

    $options = [
        'class' => 'croppic',
        'pathroot' => 'yiiBaseAdvanced/backend/web',
    ];
    $pluginOptions= [
        'uploadUrl' => '../upload-crop/upload?id='.$model->id,
        'cropUrl' => '../upload-crop/crop?id='.$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> ',
    ];
    echo $form->field($model, 'urlUpload')->widget(Croppic::className(),
        ['options' => $options,'pluginOptions' => $pluginOptions]); 

创建用于上传和裁剪图像的控制器

namespace backend\controllers;

use Yii;
use yii\web\Controller;
use yii\web\NotFoundHttpException;
use yii\filters\VerbFilter;
use gudezi\croppic\actions\CropAction;
use gudezi\croppic\actions\UploadAction;

use backend\models\Fotos;

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

    public function actions()
    {
        $id = Yii::$app->request->get('id');
        if($id>0)
            $model = $this->findModel($id);
        else
            $model = new Fotos();
        
        return [
            'upload' => [
                'class' => 'gudezi\croppic\actions\UploadAction',
                'tempPath' => '@backend/web/img/temp',
                'tempUrl' => '../img/temp/',
                'modelAttribute' => 'urlUpload',
                'model' => $model,
                'validatorOptions' => [
                    'checkExtensionByMimeType' => true,
                    'extensions' => 'jpeg, jpg, png',
                    'maxSize' => 3000000,
                    'tooBig' => 'Ha seleccionado una imagen demasiado grande (máx. 3 MB)',
                ],
            ],
            'crop' => [
                'class' => 'gudezi\croppic\actions\CropAction',
                'path' => '@backend/web/img/user/avatar',
                'url' => '../img/user/avatar/',
                'modelAttribute' => 'urlUpload',
                'model' => $model,
            ],
        ];
    }
    
    protected function findModel($id)
    {
        if (($model = Fotos::findOne($id)) !== null) {
            return $model;
        } else {
            throw new NotFoundHttpException('The requested page does not exist.');
        }
    }    
}