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

插件地址：

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" >
                <div 
                        >
                        <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 
                                        onchange="javascript:setImagePreview();" accept="image/*"
                                        multiple="">
                        </div>
                        <button >截取</button>
                </div>
                <div ></div>
        </article>

显示图片的位置

<p class="userPic mb10">
   <a ></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();
                }
        }

　　完~