plusToken
/
edit-avatar.html

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/cart/cropper.min.css">
    <link rel="stylesheet" href="./css/cart/ImgCropping.css">
    <link rel="stylesheet" href="./css/jiazai.css">
    <title>裁剪图片</title>
    <style>
        .notice-hea {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            height: 40px;
            padding: 0 20px;
            display: flex;
            align-items: flex-end;
        }

        .notice-hea>span {
            margin-left: 18px;
            font-size: 17px;
        }

        .sha-border {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 150px auto 50px;
            text-align: center;
            font-size: 25px;
            line-height: 200px;
            border: 1px dashed #eee;
            color: #eee;
        }

        .sha-border>input {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        .sha-border>img {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
        }

        .btn-up {
            width: 200px;
            margin: auto;
            box-sizing: border-box;
        }

        .btn-up>button {
            width: 100%;
            padding: 15px 0;
            background: #3574FA;
            box-shadow: 0 0 10px RGBA(53, 116, 250, 0.8);
            color: white;
        }
    </style>
</head>

<body>
    <div id='app'>

        <!-- 加载中动画 -->
        <div class='jiazai' style="display:none;">
            <img src="./img/jia-ani.gif" width="50px" height="50px">
        </div>
        <!-- 加载中11动画 -->

        <div class='notice-hea'>
            <img onclick='plus.webview.currentWebview().close("none");' src="./img/right-black.svg" width="20px" height="20px">
            <span>修改头像</span>
        </div>
        <!-- <button >更换图片</button> -->
        <div id="replaceImg" class='sha-border'>
            +
            <img id="finalImg" src="" width="100%">
            <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" onchange="selectImg(this)">
        </div>

        <div class='btn-up' onclick="upBase()">
            <button>上传</button>
        </div>

        <!--图片裁剪框 start-->

        <div style="display: none" class="tailoring-container">
            <div class="black-cloth" onclick="closeTailor(this)"></div>
            <div class="tailoring-content">
                <div class="tailoring-content-one">
                    <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
                            <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)">
                            重选图片
                        </label>
                    <div class="close-tailoring" onclick="closeTailor(this)">×</div>
                </div>
                <div class="tailoring-content-two">
                    <div class="tailoring-box-parcel">
                        <img id="tailoringImg">
                    </div>
                    <div class="preview-box-parcel">
                        <p>图片预览：</p>
                        <div class="square previewImg"></div>
                        <div class="circular previewImg"></div>
                    </div>
                </div>
                <div class="tailoring-content-three">
                    <!-- <button class="l-btn cropper-reset-btn">复位</button>
                        <button class="l-btn cropper-rotate-btn">旋转</button>
                        <button class="l-btn cropper-scaleX-btn">换向</button> -->
                    <button class="l-btn sureCut" id="sureCut">确定</button>
                </div>
            </div>
        </div>
        <!--图片裁剪框 end-->
    </div>
    <script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/back.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/cart/cropper.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script>
        var allBase = '';
        var alignOff = true;

        function upBase() {
            if (!alignOff) {
                return;
            }
            if (!allBase) {
                alert('请选择图片');
            } else {
                $('.jiazai').show();
                _post(EDIT_AVA, {
                    file: allBase,
                    userid: JSON.parse(localStorage.getItem('user')).userid
                }, function(data) {
                    $('.jiazai').hide();
                    alignOff = false;
                    $('#finalImg').attr('src', '');
                    _toast(data.msg);
                    if (data.status == 1) {
                        var user = JSON.parse(localStorage.getItem('user'));
                        user.avatar = HTTP + data.back;
                        localStorage.setItem('user', JSON.stringify(user));
                        plus.webview.getWebviewById('index').evalJS('hanAva()');
                    }
                    setTimeout(function() {
                        plus.webview.currentWebview().close('none');
                    }, 1500);
                });
            }
        }
        // 弹出框水平垂直居中
        (window.onresize = function() {
            var win_height = $(window).height();
            var win_width = $(window).width();
            if (win_width <= 768) {
                $(".tailoring-content").css({
                    "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
                    // "left": '0',
                });
            } else {
                $(".tailoring-content").css({
                    "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
                    // "left": (win_width - $(".tailoring-content").outerWidth()) / 2,
                });
            }
        })();

        //弹出图片裁剪框
        $("#replaceImg").on("click", function() {
            $(".tailoring-container").toggle();
        });
        //图像上传
        function selectImg(file) {
            if (!file.files || !file.files[0]) {
                return;
            }
            var reader = new FileReader();
            reader.onload = function(evt) {
                var replaceSrc = evt.target.result;
                //更换cropper的图片
                $('#tailoringImg').cropper('replace', replaceSrc, false); //默认false，适应高度，不失真
            }
            reader.readAsDataURL(file.files[0]);
        }
        //cropper图片裁剪
        $('#tailoringImg').cropper({
            aspectRatio: 1 / 1, //默认比例
            preview: '.previewImg', //预览视图
            guides: false, //裁剪框的虚线(九宫格)
            autoCropArea: 0.5, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
            movable: false, //是否允许移动图片
            dragCrop: true, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
            movable: true, //是否允许移动剪裁框
            resizable: true, //是否允许改变裁剪框的大小
            zoomable: false, //是否允许缩放图片大小
            mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片
            touchDragZoom: true, //是否允许通过触摸移动来缩放图片
            rotatable: true, //是否允许旋转图片
            crop: function(e) {
                // 输出结果数据裁剪图像。
            }
        });
        // //旋转
        // $(".cropper-rotate-btn").on("click", function() {
        //     $('#tailoringImg').cropper("rotate", 45);
        // });
        // //复位
        // $(".cropper-reset-btn").on("click", function() {
        //     $('#tailoringImg').cropper("reset");
        // });
        //换向
        // var flagX = true;
        // $(".cropper-scaleX-btn").on("click", function() {
        //     if (flagX) {
        //         $('#tailoringImg').cropper("scaleX", -1);
        //         flagX = false;
        //     } else {
        //         $('#tailoringImg').cropper("scaleX", 1);
        //         flagX = true;
        //     }
        //     flagX != flagX;
        // });

        //裁剪后的处理
        $("#sureCut").on("click", function() {
            if ($("#tailoringImg").attr("src") == null) {
                return false;
            } else {
                var cas = $('#tailoringImg').cropper('getCroppedCanvas'); //获取被裁剪后的canvas
                var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
                $("#finalImg").prop("src", base64url); //显示为图片的形式
                allBase = base64url;
                //关闭裁剪框
                closeTailor();
            }
        });
        //关闭裁剪框
        function closeTailor() {
            $(".tailoring-container").toggle();
        }
    </script>
</body>

</html>