metalyoung / yii2-extension-image-tailor
Yii2图片裁剪小部件
Installs: 0
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Language:JavaScript
Type:yii2-extension
Requires
This package is auto-updated.
Last update: 2024-05-06 07:49:47 UTC
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
,但是并不唯一,当修改视图配置后对应返回格式也要修改
截图
页面载入
裁切图片
裁切完成
TODO
- 图片上传状态提示
- 文档完善
开源协议
本项目基于 MIT License.