php_group
/
watercat_website


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
							<!DOCTYPE html>
<html>
<head>
    <title>{$site_info.site_name}</title>
    <meta name="keywords" content=""/>
    <meta name="description" content="">
    <include file="public@head"/>
    <link type="text/css" rel="stylesheet" href="__TMPL__/public/assets/simpleboot3/cropper/cropper.css" />
    <style type="text/css">
        .tab-content {
            overflow: visible;
        }

        .uploaded_avatar_area {
            margin-top: 20px;
        }

        .uploaded_avatar_btns {
            margin-top: 20px;
        }

        .uploaded_avatar_area .uploaded_avatar_btns {
            display: none;
        }

        /* avatarCropper */
        .avatarwrap, .avatar-Tools {
            width: 475px;
            height: 310px;
            margin: 20px 0 0 0;
        }

        .avatarwrap .avatar-cropper {
            float: left;
            width: 300px;
            height: 300px;
            border: 1px solid #3e4664;
            display: block;
            overflow: hidden;
        }

        .avatar-cropper img {
            max-width: 100%;
        }

        .avatarwrap .avatar-preview {
            float: left;
            width: 150px;
            margin: 0 0 0 22px;
        }

        .avatar-preview .UserPreview {
            width: 100%;
            margin: 0;
        }

        .UserPreview .img-preview {
            width: 150px;
            height: 150px;
            border: 1px solid #3e4664;
            margin: 0 0 20px 0;
            padding: 0;
            display: block;
            overflow: hidden;
        }

        .UserPreview .preview-md {
            width: 80px;
            height: 80px;
        }

        .UserPreview .preview-sm {
            width: 30px;
            height: 30px;
            margin: 0;
        }

        .avatar-Tools {
            margin: 0;
            height: auto;
        }

        .avatar-Tools .btn-group {
            margin: 0 0 5px 0;
        }

        .avatar-Tools .btnsave {
            margin: 1px 0 0 0;
        }

        .avatar-Tools>.btn-group>.btn {
            width: 75.5px;
        }
    </style>
</head>
<body class="body-white" id="top">
<include file="public@nav"/>

<div class="container tc-main">
    <div class="row">
        <div class="col-md-3">
            <include file="public@usernav"/>
        </div>
        <div class="col-md-9">
            <div class="tabs">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#one" data-toggle="tab"><i class="fa fa-user"></i> 修改头像</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="one">
                        <div class="avatarwrap">
                            <div id="jqueryCropper" class="avatar-cropper">
                                <img id="userAvatarImage" src="{:cmf_get_user_avatar_url($avatar)}">
                            </div>
                            <div class="avatar-preview">
                                <div class="UserPreview">
                                    <div class="img-preview preview-lg"></div>
                                    <div class="img-preview preview-md"></div>
                                    <div class="img-preview preview-sm"></div>
                                </div>
                            </div>
                        </div>
                        <div class="avatar-Tools">
                            <div class="btn-group">
                                <button type="button" class="btn eventBtn" role="group" data-method="setDragMode" data-option="move" title="移动图片"><span class="fa fa-arrows"></span> 移动</button>
                                <button type="button" class="btn eventBtn" role="group" data-method="setDragMode" data-option="crop" title="裁剪图片"><span class="fa fa-crop"></span> 裁剪</button>
                                <button type="button" class="btn eventBtn" role="group" data-method="rotate" data-option="-10" title="向左旋转图片"><span class="fa fa-rotate-left"></span> 左旋</button>
                                <button type="button" class="btn eventBtn" role="group" data-method="rotate" data-option="10" title="向又旋转图片"><span class="fa fa-rotate-right"></span> 右旋</button>
                            </div>
                            <div class="btn-group">
                                <label class="btn btn-primary eventBtn" for="inputImage" title="打开图片">
                                    <input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png">
                                    <span class="fa fa-upload"></span> 上传
                                </label>
                                <button type="button" class="btn btn-primary eventBtn" role="group" data-method="reset" title="重置图片"><span class="fa fa-refresh"></span> 重置</button>
                            </div>
                            <button id="saveavatar" type="button" class="btn btn-success btn-lg btn-block btnsave eventBtn"><i class="fa fa-save"></i> 确认保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <include file="public@footer"/>

</div>
<!-- /container -->

<include file="public@scripts"/>
<script src="__TMPL__/public/assets/simpleboot3/cropper/cropper.js"></script>
<script src="__TMPL__/public/assets/simpleboot3/cropper/jquery-cropper.min.js"></script>
<script src="__TMPL__/public/assets/simpleboot3/canvas-to-blob/canvas-to-blob.min.js"></script>
<script type="text/javascript">
    
    // 初始化变量
    <php>$uploadedImageName = empty($avatar) ? '' : 'temp_image.jpg';</php>
    var nzc = $("#jqueryCropper");
    var nzi = $('#userAvatarImage');
    var n2i = $('#inputImage');
    var originalImageURL = n2i.attr('src');
    var uploadedImageName = '{$uploadedImageName}';
    var uploadedImageType = 'image/jpeg';
    var uploadedImageURL = '';
    var uploadedParams = {};
    var options = {
        aspectRatio: 1 / 1,
        preview: '.img-preview',
        viewMode: 2
    };

    // ready事件
    $(function(){

        // 监听工具栏按钮
        $('button[data-method]').on('click',function(){
            nzi.cropper($(this).data('method'), $(this).data('option'))
        })

        // 监听上传控件内容变更
        n2i.change(function () {
            
            var files = this.files;
            var file;
            
            if (!nzi.data('cropper')) {
                return;
            }
            
            if (files && files.length) {
                
                file = files[0];
                
                if (/^image\/\w+$/.test(file.type)) {
                    
                    uploadedImageName = file.name;
                    uploadedImageType = file.type;
                    
                    if (uploadedImageURL) {
                        URL.revokeObjectURL(uploadedImageURL);
                    }
                    
                    uploadedImageURL = URL.createObjectURL(file);
                    
                    nzi.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                    n2i.val('');
                } else {
                    window.alert('Please choose an image file.');
                }
            }
        })

        // 监听保存
        $('#saveavatar').on('click',function (){

            // 禁用所有控件
            $('.eventBtn').prop('disabled', true);
            $('.btnsave').html('<i class="fa fa-spinner fa-pulse fa-fw"></i> 上传中');

            // 判断是否有数据
            let tmp_img = nzi.cropper('getCroppedCanvas',{width: 512,height: 512})
            if(!tmp_img) alert('请上传图片。');
            
            // 转blob上传
            tmp_img.toBlob(function (blob){

                // 创建form
                var formData = new FormData();
                formData.append('file', blob, uploadedImageName);

                // 禁用cropper
                nzi.cropper('disable')

                // ajax 上传
                Wind.use("noty", function () {
                    $.ajax("{:cmf_url('user/Profile/avatarUpload')}", {
                        method: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (e) {
                            delay_url = e.url
                            noty({text: e.msg,type: ((e.code == 0) ? 'error' : 'success'),layout: 'center'})
                            $('.eventBtn').prop('disabled', false);
                            $('.btnsave').html('<i class="fa fa-save"></i> 确认保存');
                            nzi.cropper('enable')
                            if(e.url != '') {
                                setTimeout(function(){ window.location.href = e.url }, (e.wait-1)*1000)
                            }
                            console.log(e)
                        },
                        error: function (e) {
                            noty({text: '网络连接失败。',type: 'error',layout: 'center'})
                            $('.eventBtn').prop('disabled', false);
                            $('.btnsave').html('<i class="fa fa-save"></i> 确认保存');
                            nzi.cropper('enable')
                        }
                    })
                })

            }, "image/jpeg", 0.85);

        });
        
        // 初始化裁剪窗口
        nzi.cropper(options);
    })
</script>
</body>
</html>