Yii2-image-cropper
Yii2的图片裁切小部件
安装
推荐使用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){
}'
],
]); ?>
上传控制器
图片上传到 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.