coderfixlab/yii2-image-cropper

Yii2图片裁剪小部件


Keywords
image, extension, widget, yii2, cropper
License
MIT

Documentation

Yii2-image-cropper

Yii2的图片裁切小部件


Latest Stable Version Total Downloads Latest Unstable Version License

安装

推荐使用composer安装

composer require coderfixlab/yii2-image-cropper

快速配置

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){ 
                    
                }'
        ],
    ]); ?>

上传控制器

图片上传到 uploadOptionsurl地址中

会模拟表单提交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中定义的urlattachment,但是并不唯一,当修改视图配置后对应返回格式也要修改

截图

页面载入

页面

裁切图片

裁切图片

裁切完成

裁切完成

TODO

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

开源协议

本项目基于 MIT License.