一、Html5实现头像上传和编辑
插件地址：
html5手机端裁剪图片上传头像代码
本地项目引入注意事项：
1.将html的js搬到外面的js文件中，便于管理
2.图片样式在html都是在页面写死，需要调整
3.页面引入css和js,editPic.js是页面提取出来的js
<link href="../js/fileupload/style.css" rel="external nofollow" 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();
}
}
完~
