dennis
/
EV-04


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
							<!DOCTYPE html>
<html lang="en">
<head>
  	<title>Photo</title>
  	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
	<link rel="stylesheet" href="./css/cropper.min.css" type="text/css" />
	<style>
		body{
			margin: 0px;
			background-color:rgb(240,240,240);
		}
		.croper-box {
			width: 560px;
			height: 300px;
			overflow: hidden;
			float:left;
		}
		.img-preview {
			margin-left: 5px;
			width: 150px;
			height: 150px;
			overflow: hidden;
			float:left;
		}
		.btn-preview {
			margin-left: 5px;
			margin-top:40px;
			width: 150px;
			height: 150px;
			overflow: hidden;
			float:left;
		}
		.btn-preview input{
			margin-top:5px;
			width:120px;
			height:33px;
			color:#FFF;
			background:#09A3C8;
			border: 1px solid #09A3C8;
			border-radius: 3px;
		}
	</style>
	<script src="./js/jquery.min.js"></script>
	<script src="./js/cropper.min.js"></script>
	<script type="text/javascript">
		function initCropper(image, input){
			var $image = image;
			var $inputImage = input;
			var options = {
				aspectRatio: 1, // 纵横比
				viewMode: 2,
				preview: '.img-preview', // 预览图的class名
				crop: function(event) {
					event.src = $('#photoPath').val();
					//console.log("event="+JSON.stringify(event));
					$('#detail').val(JSON.stringify(event));
				}
			};
			$image.cropper(options);
			var uploadedImageURL;
			var URL = window.URL || window.webkitURL;
			if (URL) {
				// 给input添加监听
				$inputImage.change(function () {
					var files = this.files;
					var file;
					if (!$image.data('cropper')) {
						return;
					}
					if (files && files.length) {
						file = files[0];
						// 判断是否是图像文件
						if (/^image\/\w+$/.test(file.type)) {
							// 如果URL已存在就先释放
							if (uploadedImageURL) {
								URL.revokeObjectURL(uploadedImageURL);
							}
							uploadedImageURL = URL.createObjectURL(file);
							// 销毁cropper后更改src属性再重新创建cropper
							$image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
							$inputImage.val('');
						} else {
						  window.alert('请选择一个图像文件！');
					  }
					}
				});
			} else {
				$inputImage.prop('disabled', true).addClass('disabled');
			}
		}

		function changePhoto(){
			let photoPath = window.changeImage();

			$('#photoPath').val(photoPath);
			// 更换cropper的图片
			$('#photo').cropper('replace', photoPath, false);
		}

		function savePhoto(){
			console.log($('#detail').val());
			window.saveImage($('#detail').val());
		}

		function defaultPhoto(){
			window.saveImage('');
		}

		function setPhotoPath(data){
			$('#photoPath').val(data);
			$('#photo').attr('src', data);
			initCropper($('#photo'),$('#inputImage'));
		}
	</script>
</head>
<body>
	<div style="width: 760px">
		<div class="croper-box">
	        <img id="photo" src="" class="wait-crop croper-box">
	    	<input id="photoPath" type="hidden" value="">
	    </div>
	    <div>
	    	<div class="img-preview"></div>
	    	<input id="detail" type="hidden" value="">
	    	<div class="btn-preview">
		    	<input type="button" style="" class="btn btn-default" onclick="changePhoto()" value="Change" />
				<input type="button" class="btn btn-default" onclick="savePhoto();" value="Save" />
				<input type="button" class="btn btn-default" onclick="defaultPhoto();" value="Default" />
				<input type="file" id="inputImage" accept=".png,.jpg" style="display:none;">
	    	</div>
	    </div>
	</div>
</body>
</html>