README

Yii2图片裁切小部件

安装

推荐使用composer安装

composer require metalyoung/yii2-extension-image-tailor

快速配置

model

不要将image设置成file，将其视为文本即可，因为图片上传操作并未经过业务表，部件返回给input的实际上是一个文本。

    public function rules() {
        return [
            [['image'], 'string'],
        ];
    }

view

    <?=  $form->field($model, 'image')->widget(\coderfixlab\cropper\Cropper::className(), [
        'label' => '选择图片',
        'imageUrl' => Yii::$app->tools->getImagesUrl($model->image), //页面展示的图片路径
        'value'=>$model->image, //在input中作为表单值的图片路径
        'cropperOptions' => [
            //裁切尺寸
            'width' => 518, 
            'height' => 250, 
            //预览尺寸
            'preview' => [
                'width' => 518, 
                'height' => 250,
            ],
        ],
        'uploadOptions'=>[
            'url'=>'/upload/upload-crop', //图片上传路径
            'response'=>'res.url', //返回预览的完整图片地址
            'attachment'=>'res.attachment' //返回给input中作为表单值的图片路径
        ],
        'jsOptions' => [
            'pos' => \yii\web\View::POS_END, // default is POS_END if not specified
          
            'onClick' => 'function(event){ 
                    
                }'
        ],
    ]); ?>

上传控制器

图片上传到uploadOptions中的url地址

会模拟表单提交image的文件域

参考处理代码

    public function actionUploadCrop(){
        if (Yii::$app->request->isPost) {
            $file = $_FILES['image'];
            $md5 = md5_file($file['tmp_name']);
            $fileName = 'upload/'.date("Y/m").'/'.$md5;
            Yii::$app->get("qiniu")->upload($file['tmp_name'],$fileName);
        }
        $fullUrl = Yii::$app->get("qiniu")->getDomain().'/'.$fileName;
        return json_encode([
            'code'=>0,
            'msg'=>'上传成功',
            'url' => $fullUrl,
            'attachment'=>$fileName
        ]);
        exit();
    }

注意：必定返回的是在uploadOptions中定义的url和attachment，但是并不唯一，当修改视图配置后，对应的返回格式也要进行修改

截图

页面载入

裁剪图片

裁剪完成

待办事项

• 图片上传状态提示
• 完善文档

开源协议

本项目基于 MIT License.