hulinfei
/
power-prediction-project-2.0


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
							<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('修改用户头像')" />
	<th:block th:include="include :: cropper-css" />
	<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 {
		float: right;
		width: 46px;
		display: inline-block;
		margin-bottom: 10px;
		height: 37px;
		line-height: 37px;
		font-size: 14px;
		color: #FFFFFF;
		margin: 0px 2px;
		background-color: #f38e81;
		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: #f38e81;
		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>
</head>
<body class="white-bg">
	<div class="row container">
		<div class="col-md-10">
			<div class="imageBox">
				<img id="avatar" th:src="(${#strings.isEmpty(user.avatar)}) ? @{/img/profile.jpg} : @{${user.avatar}}" th:onerror="'this.src=\'' + @{'/img/profile.jpg'} + '\''">
			</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>
<th:block th:include="include :: footer" />
<th:block th:include="include :: cropper-js" />
<script type="text/javascript">
var cropper;
var croppable = false;
$(window).load(function() {
	var image = document.getElementById('avatar');
	cropper = new Cropper(image, {
		aspectRatio: 1,
		viewMode: 1,
		autoCropArea: 0.9,
		preview: '.img-preview',
		ready: function () {
			croppable = true;
		}
	})

	$('#inputImage').on('change', function() {
		var reader = new FileReader();
		var file = $('#inputImage')[0].files[0];
		if (/^image\/\w+$/.test(file.type)) {
			reader.onload = function(e) {
				if(croppable){
					cropper.replace(e.target.result)
				}
			}
			reader.readAsDataURL(this.files[0]);
		} else {
			$.modal.alertWarning('请选择一个图片文件。');
		}
	});

	$('.btn-custom').on('click',function (e) {
		if (!croppable) {
			$.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) {
        $.modal.alertWarning("裁剪框加载中,请稍后...");
        return
    }
    cropper.getCroppedCanvas().toBlob(function(img) {
        var formdata = new FormData();
        formdata.append("avatarfile", img);
        $.ajax({
            url: ctx + "system/user/profile/updateAvatar",
            data: formdata,
            type: "post",
            processData: false,
            contentType: false,
            success: function(result) {
                $.operate.saveSuccess(result);
            }
        })
    });
}

$(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>
</body>
</html>