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"
     οnchange="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();
  }
 }

　　完~

转载于:https://www.cnblogs.com/fron/p/html5_pic_base64_20161214.html