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

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

账号和密码：he 123456

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

    }