在Go Revel 框架下接收网页上传的 Base64 图像数据

前段有个项目中操作人员可以在上传自己照片作为用户图像,网页那边用的现成模板支持照片在线裁切,图片裁切之后会成为一段 Base64 的字符串。服务端是GO 语言下的Revel 框架实现,其实可以直接将收到数据保存在数据库中,网页要显示的时候返回整段字串过去,现在的浏览器都支持显示Base64 的图像了,但是如果用户想把它保存为一个个JPG 文件呢?这样更方便文件的收集整理与外部查看。


直接上代码:

/**
* 接收图像上传 base64 数据流
*/
func ( c UserManager ) UploadICO() revel.Result {


   UserIcoPath := revel.BasePath + "/public/userico/"

   c.Request.ParseMultipartForm(32 << 20 )
   filename := c.Request.PostForm.Get("userid") +".jpg"
   datasource := c.Request.PostForm.Get("img")

   /*
   * 去掉头部的 “data:image/jpeg;base64,” 逗号之后才是有效数据
   */
   datasource = strings.Replace( datasource,"data:image/jpeg;base64,","",-1 )
   //  base64 => jpg 文件
   imgbase64, err := base64.StdEncoding.DecodeString( datasource )

   if err != nil{
      fmt.Println( err )
   }

   err = ioutil.WriteFile(  UserIcoPath + filename , imgbase64, 0666 )

   if err != nil{
      fmt.Println( err )
   }

   userconsole := UserConsole{}
   if err != nil{

      userconsole.ConsoleCode = -1
   }else{

      userconsole.ConsoleCode = 1
      userconsole.RTextStr  = UserIcoPath + filename
   }

   return c.RenderJSON( userconsole )

}


网页端的JS 代码:

$(".avatar-save").on("click", function() {

    var img_lg = document.getElementById('imageHead');

    // 截图小的显示框内的内容
    html2canvas(img_lg, {
        allowTaint: true,
        taintTest: false,
        onrendered: function(canvas) {
            canvas.id = "mycanvas";
            //生成base64图片数据
            var dataUrl = canvas.toDataURL("image/jpeg");
            var newImg = document.createElement("img");
            newImg.src = dataUrl;
            imagesAjax( dataUrl )
        }
    });


});



function imagesAjax( src ) {
    var data = {};
    data.img = src;
    //data.jid = $('#jid').val();
    data.userid = loginUser;
    $.ajax({
        url: "UploadICO",
        data: data,
        type: "POST",
        dataType: 'json',
        success: function( data ) {

            if (  data.ConsoleCode == 1 ){

                parent.ShowMessage( "新图像更新成功",1  )
                $( "#avatar-modal" ).modal( 'hide' );
                $( "#userico").attr( "src",  "/public/userico/" +  loginUser + ".jpg?update=" + Math.random()  );

                parent.UpdateUserICO( "/public/userico/" +  loginUser +".jpg"  );

                SaveUserPIC( "/public/userico/" +  loginUser +".jpg" , loginUser )

            }else{

                parent.ShowMessage( "新图像上传失败..",4 )

            }
        }
    });
}