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();
		}
	}

　　完~