Html5实现头像上传和编辑，保存为Base64的图片过程

一、Html5实现头像上传和编辑

插件地址：

html5手机端裁剪图片上传头像代码

本地项目引入注意事项：

1.将html的js搬到外面的js文件中，便于管理

2.图片样式在html都是在页面写死，需要调整

3.页面引入css和js,editPic.js是页面提取出来的js

<link href="../js/fileupload/style.css" rel="stylesheet" type="text/css">

<script src="../js/fileupload/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery|| document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script src="../js/fileupload/iscroll-zoom.js"></script>
<script src="../js/fileupload/hammer.js"></script>
<script src="../js/fileupload/jquery.photoClip.js"></script>
<script src="../js/editPic.js" type="text/javascript"></script>

关键代码：

	<!-- 上传图片的样式 -->
	<article class="htmleaf-container" style="display: none;">
		<div id="clipArea"
			style="user-select: none; overflow: hidden; position: relative;">
			<div class="photo-clip-view">
				<div class="photo-clip-moveLayer">
					<div class="photo-clip-rotateLayer"></div>
				</div>
			</div>
			<div class="photo-clip-mask">
				<div class="photo-clip-mask-left"></div>
				<div class="photo-clip-mask-right"></div>
				<div class="photo-clip-mask-top"></div>
				<div class="photo-clip-mask-bottom"></div>
				<div class="photo-clip-area"></div>
			</div>
		</div>
		<div class="foot-use">
			<div class="uploader1 blue">
				<input type="button" name="file" class="button" value="打开">
				<input id="file" type="file"
					onchange="javascript:setImagePreview();" accept="image/*"
					multiple="">
			</div>
			<button id="clipBtn">截取</button>
		</div>
		<div id="view"></div>
	</article>

显示图片的位置

<p class="userPic mb10">
   <a id="logox"><i><img id="show" src="" width="100%"></i></a>
</p>

修改$("#clipBtn")方法体

其中imgsource就是插件，剪切出来的base64位的图片编码，我们需要将编码转成图片保存

$("#clipBtn").click(
			function() {
				$.ajax({
					type : 'POST',
					url : PROJECT_PATH + '/upload/mobileUploadPic',
					data : {
						"imgsource" : imgsource,
						"path" : "citizens"
					},
					dataType : 'text',
					success : function(data) {
						var ao = $.parseJSON(data);
						if (ao.result) {
							picFileSaveUrl = ao.obj.picFileSaveUrl;
						 	$("#show").attr("src",PROJECT_PATH+picFileSaveUrl);
					    	$("#pictureUrl").val(PROJECT_PATH+picFileSaveUrl);
							$(".htmleaf-container").hide();
						}

					},
					// 调用出错执行的函数
					error : function() {
					}

				});

			})
});

二、Base64的存储为本地图片过程　

需要注意的是 图片的base64位是带有"data:image/jpeg;base64,"字段，需要去掉，才能保存图片的

public final static String BASE64_HEADER = "data:image/jpeg;base64,";// base64位的头部信息

File file = new File(picUrl);
if (!file.getParentFile().exists()) {
   file.getParentFile().mkdirs();
}
try {
   file.createNewFile();
} catch (IOException e) {
   e.printStackTrace();
}

String base64ImgData = imgsource.substring(BASE64_HEADER.length(), imgsource.length() - 1);

decodeBase64ToImage(base64ImgData, file);// 转成文件

/**
	 * 将Base64位编码的图片进行解码，并保存到指定目录
	 *
	 * @param base64
	 *            base64编码的图片信息
	 * @return
	 */
	public static void decodeBase64ToImage(String base64, File file) {
		BASE64Decoder decoder = new BASE64Decoder();
		try {

			byte[] decoderBytes = decoder.decodeBuffer(base64);

			for (int i = 0; i < decoderBytes.length; ++i) {
				// 调整异常数据
				if (decoderBytes[i] < 0) {
					decoderBytes[i] += 256;
				}
			}

			OutputStream write = new FileOutputStream(file);
			write.write(decoderBytes);
			write.flush();
			write.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

　　完~