基于layui 图片截取（剪裁）上传图片，主要用于用户头像上传

剪裁）上传图片，主要用于用户头像上传"/>

基于layui 图片截取（剪裁）上传图片，主要用于用户头像上传

在开发中，可能会遇到一些需求，比如，在用户上传头像时，根据自己的图片大小进行截取；

账号和密码：he 123456

体验地址：
blog.itxkf/admin/login/login

具体功能：

在：

效果如下：

代码如下：

 <div class="layui-form-item"><label class="layui-form-label">管理员头像</label><div class="layui-input-block"><div class="layui-upload"><button type="button" class="layui-btn" id="test1" data-src="{$find.admin_logo}">上传图片</button><div class="layui-upload-list"><img class="layui-upload-img" id="demo1" style="width: 100px;height: 100px;" src="{$find.admin_logo}"><p id="demoText"></p></div></div></div></div>

js：

JS：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: '#test1',saveW:150     //保存宽度,saveH:150   //保存高度,mark:1/1    //选取比例,area:'900px'  //弹窗宽度,url: "{:url('admin/upload/img_save',['type'=>'admin'])}"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样,done: function(data){ //上传完毕回调if(data.code==1){$('#demo1').attr('src', data.url);$('#test1').attr('data-src', data.url);  //成功返回路径存到数据库}else {return layer.msg('上传失败');}/* $("#inputimgurl").val(url);$("#srcimgurl").attr('src',url);*/}});});

控制器：

    public function img_save(){$type=input("param.type");$img = request()->file('file');// 移动到框架应用根目录/public/uploads/ 目录下$info = $img->move(ROOT_PATH . 'public' . DS . 'upload'. DS . $type. DS . date('Y') . DS . date('m-d'),md5(microtime(true)));if($info){// 成功上传后 获取上传信息$imgPath = "/upload/$type/" . date('Y') . '/' . date('m-d') . '/' . $info->getSaveName();return json(["code"=> 1, "msg" => "上传成功", "url" => $imgPath]);}else{// 上传失败获取错误信息0return json(["code"=> 0, "msg" => $img->getError(), "url" => '']);}}