<#include "/common/defaultEngine.html"/>
<@pageTheme mark="${config.optimize()?string('true', 'false')}">
<@header title="图片裁剪" libs=["cropper"] bodyClass="white-bg" style="height: 95%;">
    <style type='text/css'>
        /* avator css start */
        .container {
            margin: 10px 5px 5px 5px;
        }

        .action {
            padding: 5px 0px;
        }

        .cropped {
            width: 200px;
            border: 1px #ddd solid;
            box-shadow: 0px 0px 12px #ddd;
        }

        .img-preview {
            border-radius: 50%;
            box-shadow: 0px 0px 12px #7e7e7e;
            display: inline-block;
        }

        .preview-box {
            text-align: center;
            margin: 0px auto;
            margin-top: 10px;
            color: #bbb;
        }

        .preview-md {
            width: 128px;
            height: 128px;
        }

        .preview-sm {
            width: 96px;
            height: 96px;
        }

        .preview-xs {
            width: 64px;
            height: 64px;
        }

        .imageBox {
            border: 1px solid #aaa;
            overflow: hidden;
            cursor: move;
            box-shadow: 4px 4px 12px #B0B0B0;
            margin: 0px auto;
        }

        .btn-custom {
		    color: #fff;
		    background-color: #3e8ef7;
		    border-color: #3e8ef7;
		    box-shadow: none;
            float: right;
            width: 46px;
            display: inline-block;
            margin-bottom: 10px;
            height: 37px;
            line-height: 37px;
            font-size: 14px;
            margin: 0px 2px;
            border-radius: 3px;
            text-decoration: none;
            cursor: pointer;
            /* box-shadow: 0px 0px 5px #B0B0B0; */
            border: 0px #fff solid;
        }
        /*选择文件上传*/
        .new-contentarea {
            width: 165px;
            overflow: hidden;
            margin: 0 auto;
            position: relative;
            float: left;
        }

        .new-contentarea label {
            width: 100%;
            height: 100%;
            display: block;
        }

        .new-contentarea input[type=file] {
            width: 188px;
            height: 60px;
            background: #333;
            margin: 0 auto;
            position: absolute;
            right: 50%;
            margin-right: -94px;
            top: 0;
            right/*\**/: 0px\9;
            margin-right/*\**/: 0px\9;
            width/*\**/: 10px\9;
            opacity: 0;
            filter: alpha(opacity=0);
            z-index: 2;
        }

        a.upload-img {
            width: 165px;
            display: inline-block;
            margin-bottom: 10px;
            height: 37px;
            line-height: 37px;
            font-size: 14px;
            color: #FFFFFF;
            background-color: #3e8ef7;
            border-radius: 3px;
            text-decoration: none;
            cursor: pointer;
            border: 0px #fff solid;
            box-shadow: 0px 0px 5px #B0B0B0;
        }

        a.upload-img:hover {
            background-color: #ec7e70;
        }

        .tc {
            text-align: center;
        }
        /* avator css end */
    </style>
</@header>
<div class="row container">
    <input id="imageBase64" type="hidden" value=""/>
    <div class="col-md-10">
        <div class="imageBox">
            <img id="avatar" src="<#if imgValue == "">${imageDefault}<#else >${imgValue}</#if>" >
        </div>
        <div class="action">
            <div class="new-contentarea tc">
                <a href="javascript:void(0)" class="upload-img"><label for="inputImage">上传图像</label> </a>
                <input type="file" name="avatar" id="inputImage" accept="image/*"/>
            </div>
            <button type="button" class="btn-custom" data-method="zoom" data-option="0.1"><i class="fa fa-search-plus"></i></button>
            <button type="button" class="btn-custom" data-method="zoom" data-option="-0.1"><i class="fa fa-search-minus"></i></button>
            <button type="button" class="btn-custom" data-method="rotate" data-option="-45"><i class="fa fa-rotate-left"></i></button>
            <button type="button" class="btn-custom" data-method="rotate" data-option="45"><i class="fa fa-rotate-right"></i></button>
            <button type="button" class="btn-custom" data-method="scaleX" data-option="-1"><i class="fa fa-arrows-h"></i></button>
            <button type="button" class="btn-custom" data-method="scaleY" data-option="-1"><i class="fa fa-arrows-v"></i></button>
            <button type="button" class="btn-custom" data-method="reset"><i class="fa fa-refresh"></i></button>
        </div>
    </div>
    <div class="col-md-2">
        <div class="cropped">
            <div class="preview-box">
                <div class="img-preview preview-xs"></div>
            </div>
            <div class="preview-box">
                <div class="img-preview preview-sm"></div>
            </div>
            <div class="preview-box">
                <div class="img-preview preview-md"></div>
            </div>
        </div>
    </div>
</div>
<@footer>
<script type="text/javascript">
    var cropper;
    var croppable = false,imgType = "image/png",imageBase64;
    $(window).load(function() {
        var image = document.getElementById('avatar');
        cropper = new Cropper(image, {
            aspectRatio: ${ratio},
            viewMode: ${viewMode},
            autoCropArea: 1,
            preview: '.img-preview',
            ready: function () {
                 croppable = true;
                 $(window).resize();
            }
        })

        $('#inputImage').on('change', function() {
            var reader = new FileReader();
            var file = $('#inputImage')[0].files[0];
            var fileSize = file.size;
            fileSize =  Math.round(fileSize/1024*100)/100;
            if(fileSize > 1024){
                opt.modal.alertError('图片过大,最大为1M.');
                return;
            }
            if (/^image\/\w+$/.test(file.type)) {

                imgType = file.type;
                reader.onload = function(e) {
                    if(croppable){
                        cropper.replace(e.target.result)
                    }
                }
                reader.readAsDataURL(this.files[0]);
            } else {
                opt.modal.alertError('请选择一个图片文件。');
            }
        });

        $('.btn-custom').on('click',function (e) {
            if (!croppable) {
                opt.modal.alertWarning("裁剪框加载中,请稍后...");
                return;
            }
            var data = {
                method: $(this).data('method'),
                option: $(this).data('option') || undefined,
            };
            var result = cropper[data.method](data.option, data.secondOption);
            if(['scaleX','scaleY'].indexOf(data.method) !== -1){
                $(this).data('option', -data.option)
            }
        })
    });

    function submitHandler() {
        if (!croppable) {
            opt.modal.alertWarning("裁剪框加载中,请稍后...");
            return
        }
        imageBase64 = cropper.getCroppedCanvas().toDataURL("base64");
        $("#imageBase64").val(imageBase64);
        return true;
    }

    $(window).resize(function() {
        $('.imageBox').height($(window).height() - 80);
        $('.cropped').height($(window).height() - 40);
    }).resize();

    if (!HTMLCanvasElement.prototype.toBlob) {
        Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
            value: function(callback, type, quality) {
                var canvas = this;
                setTimeout(function() {
                    var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
                    var len = binStr.length;
                    var arr = new Uint8Array(len);
                    for (var i = 0; i < len; i++) {
                        arr[i] = binStr.charCodeAt(i);
                    }
                    callback(new Blob([arr], {
                        type: type || 'image/png'
                    }));
                });
            }
        });
    }
</script>
</@footer>
</@pageTheme>