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

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

账号和密码：he 123456

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

具体功能：

在：

 

效果如下：

代码如下：

 

                管理员头像

                

                    

                        上传图片
                        

                            
                            

                        
                    
                
            

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{
            // 上传失败获取错误信息0
            return json(["code"=> 0, "msg" => $img->getError(), "url" => '']);
        }

    }