Layui裁剪图片

<div class="layui-col-sm12 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 25px;">
                    <div class="text-center layui-text">
                        <div class="user-info-head" id="userInfoHead">
                            <img src="{$formData['avatar']}" alt=""/>
                        </div>
                        <h2 style="padding-top: 20px;">Serati Ma</h2>
                        <p style="padding-top: 8px;">海纳百川，有容乃大</p>
                    </div>
                    
                </div>
            </div>
        </div>

$('#userInfoHead').click(function () {
            admin.cropImg({
                imgSrc: $('#userInfoHead>img').attr('src'),
                onCrop: function (res) {
                    $('#userInfoHead>img').attr('src', res);
                    console.log(res);
                    parent.layui.jquery('.layui-layout-admin>.layui-header .layui-nav img.layui-nav-img').attr('src', res);
                    $.ajax({
                        data:{base:res},
                        url:'{:url("system/admin/upload_base64")}',
                        method: 'post',
                        success:function(res){
                            // /console.log(res);
                        }
                    })
                }
            });
        });

需要引入 Cropper.css Cropper.js


后台

 public function upload_base64()
    {
        $base64_img = $this->request->param('base');
        $arr = explode(',', $base64_img);
        $filename = date('Ymd') . '/';
        $uploaddir = ROOT_PATH . 'public/uploads/'.$filename;
        is_dir($uploaddir) or mkdir($uploaddir, 0755, true);
        // 文件保存名
        $savename = md5(microtime(true)) . '.jpg';
        $new_file = $uploaddir. $savename;
        file_put_contents($new_file, base64_decode($arr[1]));
        $host=config('app.pic_url');
        return res('成功',1,$host.$filename.$savename);
        return $host.$filename.$savename;
    }
}