Croppie插件所有的逻辑

@extends('common.layout.main')
@section('style')
    <link rel="stylesheet" href="{{asset('lib/croppie/croppie.css')}}">

    <style>
        .left img {
            margin-right: 8px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }

        .sethead {
            padding: 15px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .left {
            display: flex;
            align-items: center;
        }

        .info .name {
            font-size: 18px;
        }

        .info .desc {
            font-size: 12px;
            color: #6a737d;
        }

        .setbody {
            padding-bottom: 50px;
        }


        .avatar-title {
            font-weight: bold;
        }

        .avatar-wrap {
            height: 200px;
            width: 200px;
            position: relative;
        }

        .avatar-wrap img {
            height: inherit;
            width: inherit;
            border-radius: 50%;
        }

        .avatar-action {
            position: absolute;
            bottom: 5px;
            left: 5px;
        }

        /*    头像上传*/

        .vanilla-pre div {
            text-align: center;
        }

        .vanilla-pre img {
            border-radius: 50%;
        }

        .wh100 img {
            width: 100px;
            height: 100px;
        }

        .wh50 img {
            width: 50px;
            height: 50px;
        }

        .wh100 {
            margin-top: 15px;
        }

        .wh50 {
            margin-top: 15px;
        }

    </style>
@endsection

@section('cnt')
    @include('common.validate',['container'=>true])
    @include('common.msg',['container'=>true])


    <div class="container">

        <div class="sethead">
            <div class="left">
                <div>
                    <img src="{{$profile->avatar}}" alt="">
                </div>
                <div class="info">
                    <div class="name">{{$profile->nickname}}</div>
                    <div class="desc">您的个人帐户</div>
                </div>
            </div>
            <div class="right">
                <a class="btn btn-default" href="{{route('user.index',auth()->user()->username)}}" role="button">
                    <i class="iconfont icongerenzhongxin"></i>个人中心
                </a>
            </div>
        </div>
        <div class="setbody">
            <div class="row">
                <div class="col-md-3">
                    <ul class="nav nav-tabs nav-stacked">
                        <li role="presentation" class="active"><a href="{{route('settings.profile')}}">个人资料</a></li>

                        <li role="presentation"><a href="#">更多设置</a></li>
                    </ul>
                </div>
                <div class="col-md-9">
                    <h3>资料设置</h3>
                    <hr>
                    <div class="row">
                        <div class="col-md-8">
                            <form id="from" action="{{route('settings.profile')}}" method="post">
                                @csrf
                                <div class="form-group">
                                    <label for="username">个人空间地址</label>
                                    <div class="input-group">
                                        <span class="input-group-addon" id="basic-addon3">{{$url}}</span>
                                        <input type="text" placeholder="个人空间地址" class="form-control" id="username"
                                               name="username" value="{{$user->username}}">
                                    </div>
                                </div>
                                <hr>
                                <div class="form-group">
                                    <label for="nickname">昵称</label>
                                    <input type="text" class="form-control" id="nickname" placeholder="昵称"
                                           name="nickname" value="{{$profile->nickname}}">
                                </div>
                                <div class="form-group">
                                    <label for="bio">个人简介</label>
                                    <textarea class="form-control" rows="5" placeholder="个人简介" id="bio"
                                              name="bio">{{$profile->bio}}</textarea>
                                </div>

                                <div class="form-group">
                                    <label for="native_place">籍贯</label>
                                    <input type="text" class="form-control" id="native_place" placeholder="籍贯"
                                           name="native_place" value="{{$profile->native_place}}">
                                </div>

                                <div class="form-group">
                                    <label for="location">所在地</label>
                                    <input type="text" class="form-control" id="location" placeholder="所在地"
                                           name="location" value="{{$profile->location}}">
                                </div>

                                <div class="form-group">
                                    <label for="url">个人站点</label>
                                    <input type="text" class="form-control" id="url" placeholder="如果你也有个性站点,不妨展示出来"
                                           name="url"
                                           value="{{$profile->url}}">
                                </div>

                                <button type="submit" class="btn btn-default">保存</button>
                            </form>

                        </div>
                        <div class="col-md-4">
                            <div class="avatar-title">头像</div>
                            <div class="avatar-wrap">
                                <img src="{{$profile->avatar}}" alt="">
                                <div class="avatar-action">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default dropdown-toggle"
                                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="iconfont iconiconfront-"></i> 编辑 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="##" data-toggle="modal" data-target="#myModal">
                                                    <i class="iconfont iconshangchuan"></i>上传头像
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{route('profile.avatar')}}" class="reset-btn">
                                                    <i class="iconfont iconrefresh01"></i>头像重置
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">头像上传</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div id="vanilla-demo"></div>
                            </div>
                            <div class="col-md-4">
                                <div class="vanilla-pre">
                                    <div class="text-muted">预览</div>
                                    <div class="wh100"><img src="{{$profile->avatar}}"></div>
                                    <div class="text-muted">100 x 100</div>
                                    <div class="wh50"><img src="{{$profile->avatar}}"></div>
                                    <div class="text-muted">50 x 50</div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">

                        <div class="row">
                            <div class="col-md-8 text-center">


                                <button data-deg="90" type="button" class="btn btn-default rotate">
                                    <i class="iconfont iconnishizhencounterclockwise3"></i>
                                </button>

                                <button data-deg="-90" type="button" class="btn btn-default rotate">
                                    <i class="iconfont iconshunshizhenfangxiangclockwise4"></i>
                                </button>


                            </div>
                            <div class="col-md-4 text-center">
                                <!-- 文件选择框 -->
                                <input type="file" class="hidden valid-pic"/>
                                <button type="button" class="btn btn-default" onclick="$('.valid-pic').click();">
                                    <i class="iconfont iconxuanzewenjian"></i>选择
                                </button>
                                <button type="button" class="btn btn-default upload-result">
                                    <i class="iconfont iconshangchuan"></i>上传
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    {{--    表单验证插件--}}
    <script src="{{asset('lib/formvalidation/js/formValidation.min.js')}}"></script>
    <script src="{{asset('lib/formvalidation/js/framework/bootstrap.min.js')}}"></script>
    <script src="{{asset('lib/formvalidation/js/language/zh_CN.js')}}"></script>

    {{--    头像插件 --}}
    <script src="{{asset('lib/validPic.js')}}"></script>
    <script src="{{asset('lib/croppie/croppie.min.js')}}"></script>

    <script>
        $("#from").formValidation({
            //配置语言
            locale: "zh_CN",
            //验证字段
            fields: {
                username: {
                    validators: {
                        notEmpty: true,

                        // regexp: {
                        //     regexp: /^[a-zA-Z][0-9a-zA-Z]{3,10}$/,
                        //     message: "个人空间地址以字母、数字组成,至少 4 个字符，最长 11 个字符,必须以字母开头"
                        // },
                        //异步验证是否已存在,如果用了这个验证那么就不要用前端本地了，不然的话会有两个提示，很难看
                        remote: {
                            type: 'POST',
                            url: '{{ route("settings.uIsExist") }}',
                            data: {
                                _token: "{{csrf_token()}}"
                            },
                            // message: '该分类已存在',
                            delay: 1000
                        }
                    }
                },
                nickname: {
                    validators: {
                        notEmpty: true,
                        stringLength: {
                            max: 6,
                            message: "昵称最大只能6个字符"
                        },
                    }
                },
                bio: {
                    validators: {
                        stringLength: {
                            max: 200,
                            message: "个人简介最大只能是200个字符"
                        },
                    }
                },
                native_place: {
                    validators: {
                        stringLength: {
                            max: 200,
                            message: "籍贯最大只能是200个字符"
                        },
                    }
                },
                location: {
                    validators: {
                        stringLength: {
                            max: 200,
                            message: "所在地最大只能是200个字符"
                        },
                    }
                },
                url: {
                    validators: {
                        stringLength: {
                            max: 200,
                            message: "个人主页最大只能是200个字符"
                        },
                    }
                }
            }
        })
    </script>

    <script>

        let vanilla = null;

        $('#myModal').on('shown.bs.modal', function (e) {
            // 初始化插件
            let el = document.getElementById('vanilla-demo');

            //判断是否实例化过
            if (vanilla == null) {
                vanilla = new Croppie(el, {
                    viewport: {width: 200, height: 200, type: 'circle'},
                    boundary: {width: 300, height: 300},
                    showZoomer: true,
                    enableOrientation: true
                });
            }

            //监听头像大小改变
            el.addEventListener('update', function (ev) {
                if (vanilla.data.url != undefined) {
                    let cropData = ev.detail;

                    console.log(cropData);

                    //on button click
                    vanilla.result().then(function (e) {
                            $('.wh50 img').attr('src', e);
                            $('.wh100 img').attr('src', e);
                    });


                    //
                    // //on button click
                    // vanilla.result('result', 'html').then(function(html) {
                    //     // html is div (overflow hidden)
                    //     // with img positioned inside.
                    //
                    //     console.log(html)
                    //
                    //
                    // });


                    // vanilla.result('blob', 'viewport').then(function (blob) {
                    //
                    //
                    //     $('.wh50 img').attr('src', window.URL.createObjectURL(blob));
                    //     $('.wh100 img').attr('src', window.URL.createObjectURL(blob));
                    // });
                }
            });

            //不是指定文件
            $('.valid-pic').on('error', function (e) {
                let data = e.originalEvent.detail;
                notify('只支持 png, jpg, gif, bmp类型')
            });

            //是指定文件回显操作
            $('.valid-pic').on('success', function (e) {
                let data = e.originalEvent.detail;
                //回显头像
                let reader = new FileReader();
                reader.onload = function (e) {
                    vanilla.bind({
                        url: e.target.result,
                        orientation: 1,
                    });
                }
                reader.readAsDataURL(data.file);
            });

            //旋转操作
            $('.rotate').on('click', function () {
                // 普通js方式
                vanilla.rotate(parseInt($(this).data('deg')));
            });


            //4.点击确定获取图像
            $('.upload-result').on('click', function (ev) {
                //判断是否绑定图片
                if (vanilla.data.url != undefined) {
                    //有绑定图片就返回裁剪图片
                    vanilla.result('blob', 'viewport').then(function (blob) {
                        //得到url回显给image  window.URL.createObjectURL(blob)


                        //创建forData表单对象,把二进制的头像给放进去
                        let formData = new FormData();

                        //添加头像
                        formData.set('avatar', blob);
                        //发送ajax到后台进行操作

                        //发送请求
                        $.ajax({
                            url: "{{route('profile.avatar')}}",
                            type: 'POST',
                            data: formData,
                            //禁止数据序列化,不加这几个数据接收不到
                            processData: false,
                            contentType: false,
                            cache: false
                        }).then(({status, msg, url}) => {
                            if (status) {
                                notify(msg)
                            } else {//成功
                                let timerInterval
                                Swal.fire({
                                    icon: 'success',
                                    title: msg,
                                    timer: 1500,
                                    timerProgressBar: true,
                                    willClose: () => {
                                        clearInterval(timerInterval)
                                    }
                                }).then((result) => {
                                    //或者点击确定按键也让他执行跳转
                                    if (result.isConfirmed || result.dismiss === Swal.DismissReason.timer || result.dismiss === Swal.DismissReason.backdrop) {
                                        redirectUrl(url);
                                    }
                                })

                            }
                        })


                    });
                } else {
                    //还没有绑定图片
                    notify("未选择图片")
                }

            });


        })


    </script>

    <script>
        $('.reset-btn').on('click', function (e) {
            e.preventDefault();
            //获取请求地址
            let url = $(this).attr('href');


            Swal.fire({
                title: '确定要重置头像?',
                text: "男儿不展同云志,空负天生八尺躯",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#198754',
                cancelButtonColor: '#d93444',
                confirmButtonText: '是的',
                cancelButtonText: '算了'
            }).then((result) => {
                if (result.isConfirmed) {
                    //发送请求
                    $.ajax({
                        url: url,
                    }).then(({status, msg, url}) => {
                        if (status) {
                            notify(msg)
                        } else {//成功
                            let timerInterval
                            Swal.fire({
                                icon: 'success',
                                title: msg,
                                timer: 1500,
                                timerProgressBar: true,
                                willClose: () => {
                                    clearInterval(timerInterval)
                                }
                            }).then((result) => {
                                if (result.isConfirmed || result.dismiss === Swal.DismissReason.timer || result.dismiss === Swal.DismissReason.backdrop) {
                                    redirectUrl(url);
                                }
                            })

                        }
                    })


                }
            })
        });
    </script>


@endsection