编辑头像功能

 

html:

<div class="modal fade" id="userImgModal" role="dialog" aria-labelledby="gridSystemModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="gridSystemModalLabel">编辑头像</h4>
				</div>
				<div class="modal-body">
					<div class="container">
						<div class="imageBox pull-left">
							<div class="thumbBox"></div>
							<div class="spinner" style="display: none">Loading...</div>
						</div>
						<div class="cropped pull-left"></div>
					</div>
				</div>
				<div class="modal-footer">
					<input type="file" id="upload-file" class="file">
					<button type="button" id="btnZoomOut" class="btn btn-primary">-</button>
					<button type="button" id="btnZoomIn" class="btn btn-primary">+</button>
					<button type="button" id="btnCrop" class="btn btn-primary">剪切</button>
					<button type="button" id="btnImgSubmit" class="btn btn-primary" disabled="disabled" onclick="updateUserPhoto()">保存</button>
					<button type="button" id="close" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>

 

js:

<script type="text/javascript" src="../asset/js/cropbox.js"></script>
	<script type="text/javascript">
	$(function() {
		var options = {
			thumbBox : '.thumbBox',
			spinner : '.spinner',
			imgSrc : '${BASE}/asset/images/avatar.png'
		};
		var cropper = $('.imageBox').cropbox(options);
		$('#upload-file').on('change', function() {
			var reader = new FileReader();
			reader.onload = function(e) {
				options.imgSrc = e.target.result;
				cropper = $('.imageBox').cropbox(options);
			}
			reader.readAsDataURL(this.files[0]);
			this.files = [];
		});
		$('#btnCrop').on('click', function() {
			var img = cropper.getDataURL();
			$('.cropped').html('<img src="'+img+'" id="retImg">');
			$("#btnImgSubmit").removeAttr("disabled");
		});
		$('#btnZoomIn').on('click', function() {
			cropper.zoomIn();
		});
		$('#btnZoomOut').on('click', function() {
			cropper.zoomOut();
		});
		// 输入数据到输入框启动保存按钮
		$("input").keydown(function(e, previous) {
			$("#save").removeAttr("disabled");
		});
		$("#save").click(function() {
			$.post("${BASE}/iotcarveout/saveUser", {
				'userId': $("#userId").val(),
				'realName': $("#realName").val(),
				'mailBox': $("#mailBox").val()
			}, function(data) {
				if (data == 'success') {
					alert("保存成功");
				} else {
					alert("保存失败");
				}
			});
		});
	});
	function updateUserPhoto(){
		var name = $("#upload-file").val();
		var names = name.split("\\");
		name = names[names.length-1];
		var imgbytes = $("#retImg").attr("src");
		
		var userId = $("#userId").val();
		$.post(getContextPath()+"/iotcarveout/modifyuserphoto", {
			'name': name,
			'imgbytes': imgbytes,
			'userId': userId
		}, function(data){
			if (data != "") {
				$("#imgfacecheck").attr("src", data);
				// $("#facephotoaddr").val(data);
				
				$('.cropped').html("");
				$("#btnImgSubmit").attr("disabled", "disabled");
				$('#userImgModal').modal("hide");
			}
		});
	}
	</script>

 

java:

@Action("post:/iotcarveout/modifyuserphoto")
	public Data matchModifyUserPhoto(Param param) throws Exception{
		long userId = param.getLong("userId");
		String name = param.getString("name");
		String bytes = param.getString("imgbytes");
		if(name == ""){
			name = "default"+Math.random()+".jpg";
		}else{
			name = Math.random() + name;
		}
		int index = bytes.indexOf("base64");
		String imgbytes= bytes.substring(index + 7);
		//BASE64Decoder decoder = new sun.misc.BASE64Decoder(); 
		//byte[] bytes1 = decoder.decodeBuffer(imgbytes);
                byte[] bytes1 = org.apache.shiro.codec.Base64.decode(imgbytes);  
		for (int i = 0; i < bytes1.length; ++i) {
			if (bytes1[i] < 0) {// 调整异常数据
				bytes1[i] += 256;
			}
		}
		String fileName = ConfigHelper.getAppAssetPath() + ConfigHelper.getString(InnovateConstant.innovateRoot) 
				+ "users/" +userId + "/" + name;
		ByteArrayInputStream bais = new ByteArrayInputStream(bytes1);
		boolean isSuc = userService.updateUserPhoto(userId,name, bais, fileName);
		if(isSuc) {
			return new Data(fileName);
		} else {
			return new Data("");
		}
	}

 测试方法：