web端上传图片插件自带剪辑大小功能

LayUI框架组件-Cropper === 感谢 LayUI开源框架! ## LayUI仓库 https://gitee.com/layui ## 使用方式 引入文件 ```html <script src="pathto/layui/layui.js"></script> <script src="/static/cropper/croppers.js"></script> /* 这是建议目录，不用改他自己代码 */ ``` 编写元素 ```html <a class="btn" id="editimg">选择上传</a> ``` 初始化组件方法 ```javascript function init_cropper(){ layui.config({ base: '/static/cropper/' //layui自定义layui组件目录 }).use(['form','croppers'], function () { var $ = layui.jquery ,form = layui.form ,croppers = layui.croppers ,layer= layui.layer; //创建一个头像上传组件 croppers.render({ elem: '#editimg' ,saveW:150 //保存宽度 ,saveH:150 ,mark:1/1 //选取比例 ,area:'900px' //弹窗宽度 ,url: "/admin/x_file/upload_cimg" //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样 ,done: function(url){ //上传完毕回调 $("input[name=avatar]").val(url); $("#img-avatar").attr('src',url); } }); }); } init_cropper(); ``` PHP端代码 ```php <?php public function upload_cimg(){ //获取文件对象 $file = $this->request->file('file'); //验证并上传 $info = $file->validate(['size'=>'5242880','ext'=>'jpg,gif,png']) ->move(\Env::get('root_path') . 'public' . DIRECTORY_SEPARATOR . 'uploads'.DIRECTORY_SEPARATOR.'image'); //判断是否成功 if($info){ $data['src'] = $this->request->domain(true).'/uploads/image/'.$info->getSaveName(); $this->result($data,0,'上传成功'); }else{ $this->result('',200,$file->getError()); } } ```