pumelotea-WebHeadPicker
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML头像插件</title>
	<script src="jquery-1.10.2.js"></script>
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="cropper/cropper.min.css" rel="stylesheet">
	<link href="headpicker/headpicker.css" rel="stylesheet">

	<script src="cropper/cropper.min.js"></script>
	<script src="headpicker/headpicker.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>


	<div class="ibox-content ">
		<div class="row">
			<div id="crop-avatar" class="col-md-6">
				<div class="avatar-view" title="上传头像">
			    	<img id="head" src="head.jpg" alt="Logo">
			    </div>
			</div>
		</div>
	</div>


<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
	<div class="modal-dialog modal-lg">
		<div id="cp" class="modal-content">
			<form class="avatar-form">
				<div class="modal-header">
					<button class="close" data-dismiss="modal" type="button">&times;</button>
					<h4 class="modal-title" id="avatar-modal-label">上传头像</h4>
				</div>
				<div class="modal-body">
					<div class="avatar-body">
						<div class="avatar-upload">
							<label for="avatarInput">图片上传</label>
							<input class="avatar-input" id="avatarInput" name="avatar_file" type="file"></div>
						<div class="row">
							<div  class="col-md-9">
								<div class="avatar-wrapper">
									<img id="orignImg" src="">
								</div>
							</div>
							<div class="col-md-3">
								<div class="avatar-preview preview-lg"></div>
								<div class="avatar-preview preview-md"></div>
								<div class="avatar-preview preview-sm"></div>
							</div>
						</div>
						<div class="row avatar-btns">
							<div class="col-md-9">
								<div class="btn-group">
									<button class="btn" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"><i class="fa fa-undo"></i> 向左旋转</button>
								</div>
								<div class="btn-group">
									<button class="btn" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"><i class="fa fa-repeat"></i> 向右旋转</button>
								</div>
							</div>
							<div class="col-md-3">
								<button class="btn btn-success btn-block avatar-save" type="button"><i class="fa fa-save"></i>保存修改</button>
							</div>
						</div>
					</div>
				</div>
  		</form>
  	</div>
  </div>
</div>
<script>

	var picker = $('#avatar-modal');//头像弹出层

	$('#head').click(function (e) {
		picker.modal('show');
	});

	var headpicker = new HeadPicker();
	var options = {
        aspectRatio:1,
        circular:true,
        guides:false,
		accessApi:"http://192.168.1.102:8080/oss/access",
		host:"http://picture.yueare.com/",
		maxFileSize:2*1024*2048,
		imageQuality:0.9,
		fileChooseInput:$('#avatarInput'),
		orignImgContainer:$('#orignImg'),
		previewImgContainers:$('.avatar-preview'),
		rotateBtns:$('.avatar-btns'),
		completeBtn:$('.avatar-save'),
        clipboardListenerContainerID:"cp",
		picChooseCallBack:function (msg) {
			alert(msg);
		},
		accessCallBack:function (msg) {
			alert(msg);
		},
		uploadCallBack:function (msg,backImgurl) {
			$('#head').attr('src',backImgurl);
			picker.modal('hide');
		}
	};
	headpicker.initHeadPicker(options);


</script>
</body>
</html>