Base64是什么

来源:互联网 发布:mac编辑图片怎么保存 编辑:程序博客网 时间:2024/06/01 20:50

Base64编码和解码的应用

一、疑问解答

1、Base64是什么?为什么要用Base64?

  • 定义Base64是一种基于64个可打印字符来表示二进制数据的表示方法

    由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符。三个字节有24个比特,对应于4个Base64单元,即3个字节可表示4个可打印字符。它可用来作为电子邮件的传输编码。在Base64中的可打印字符包括字母A-Z、a-z、数字0-9,这样共有62个字符,此外两个可打印符号在不同的系统中而不同。一些如uuencode的其他编码方法,和之后binhex的版本使用不同的64字符集来代表6个二进制数字,但是它们不叫Base64。

  • 应用Base64常用于在通常处理文本数据的场合,表示、传输、存储一些二进制数据。包括MIME的email、在XML中存储复杂数据

2、Base64是如何编码的?

  • 编码规则:转换的时候,将三个byte的数据,先后放入一个24bit的缓冲区中,先来的byte占高位。数据不足3byte的话,于缓冲器中剩下的bit用0补足。然后,每次取出6(因为2^6=64)个bit,按照其值选ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/中的字符作为编码后的输出。不断进行,直到全部输入数据转换完成。

  • 缺点:编码后的数据比原始数据略长,为原来的4/3。在电子邮件中,根据RFC 822规定,每76个字符,还需要加上一个回车换行。可以估算编码后数据长度大约为原长的135.1%。

  • 特殊情况:当原数据长度不是3的整数倍时, 如果最后剩下一个输入数据,在编码结果后加2个“=”;如果最后剩下两个输入数据,编码结果后加1个“=”;如果没有剩下任何数据,就什么都不要加,这样才可以保证数据还原的正确性

3、Base64在URL中如何应用?

  • Base64编码可用于在HTTP环境下传递较长的标识信息。然而,标准的Base64并不适合直接放在URL里传输,因为URL编码器会把标准Base64中的“/”和“+”字符变为形如“%XX”的形式,而这些“%”号在存入数据库时还需要再进行转换,因为ANSI SQL中已将“%”号用作通配符。

  • 为解决此问题,可采用一种用于URL的改进Base64编码,它不在末尾填充’=’号,并将标准Base64中的“+”和“/”分别改成了“-”和“_”,这样就免去了在URL编解码和数据库存储时所要作的转换,避免了编码信息长度在此过程中的增加,并统一了数据库、表单等处对象标识符的格式。

  • 另有一种用于正则表达式的改进Base64变种,它将“+”和“/”改成了“!”和“-”,因为“+”,“*”以及前面在IRCu中用到的“[”和“]”在正则表达式中都可能具有特殊含义。

  • 此外还有一些变种,它们将“+/”改为“-”或“.”(用作编程语言中的标识符名称)或“.-”(用于XML中的Nmtoken)甚至“_:”(用于XML中的Name)。

概念来源:https://zh.wikipedia.org/wiki/Base64

二、程序实现

  • 基本思路:前端编码、后台解码。

  • 运用语言:JavaScript、 HTML、 AJAX 、JavaEE

  • 前端程序设计:html输入、js实现Base64编码、ajax实现请求。

  • 后端程序设计:servlet作为接口。

1、Base64实现文本的编码传输

前端代码如下:

<!doctype html><html>  <head>  <meta charset="utf-8">     <meta name="viewport" content="width=device-width" />      <meta http-equiv="Access-Control-Allow-Origin" content="*">     <title>base64编码传输</title>     <script type="text/javascript" src="jquery.min.js"></script>    <script>                function base64Encode(){            result.value = btoa(encodeURI(text.value)); //编码             }         function submit( ) {                var  base64 = btoa(encodeURI(text.value));    //获取编码后字符串          //var  base64 =   window.btoa(window.encodeURIComponent(text.value)); //并不能解决中文乱码的问题                      console.log(base64);            $.ajax({                type : "post",                url : "http://10.210.0.105:8080/Base64PostImage/DecodeString",  //后台接口                data : {                    "text" : base64                },                success : function(data) {                    console.log(data);                    if (data) {                                                 alert(data);                    } else {                                alert("false");                    }                }            });        };      </script></head><body>    <p>输入编码文本</p>    <textarea  id="text" cols="50" rows="5"></textarea>    <button id="btn" onclick="base64Encode()">Base64编码</button>    <p style="margin:0">编码后:</p>    <textarea id="result" cols="50" rows="5" readonly ></textarea>    <button id="submit" onclick="submit()">post</button>    </body></html>

后台代码如下:

servlet接口:DecodeString类
package com.wxy.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.wxy.base64.Base64Util;/** * Servlet implementation class DecodeString */@WebServlet("/DecodeString")public class DecodeString extends HttpServlet {private static final long serialVersionUID = 1L;/** * @author FollowFire * @date 2017年12月17日 00:28:16 * @Description: 解码前端传来的字符串 */protected void doPost(HttpServletRequest request, HttpServletResponse response)        throws ServletException, IOException {    // TODO Auto-generated method stub    PrintWriter out = response.getWriter();    response.setCharacterEncoding("UTF-8");    response.setHeader("Access-Control-Allow-Origin", "*");    String text = request.getParameter("text");    System.out.println(text);    System.out.println(Base64Util.Decoder(text));    out.println(Base64Util.Decoder(text));      }}
Base64Util类:没有使用其他包,导入java.util.Base64;
package com.wxy.base64;import java.io.UnsupportedEncodingException;import java.util.Base64;/** * @ClassName: Base64Util * @Description: * @author FollowFire * @date 2017年12月16日 下午11:18:45 */public class Base64Util {/** * @Method: Encoder * @Description: 对文本进行编码 * @param text * @return String * @author FollowFire * @date 2017年12月16日 下午11:18:32 */public static String Encoder(String text) throws UnsupportedEncodingException {    Base64.Encoder encoder = Base64.getEncoder();    byte[] textByte = text.getBytes("UTF-8");    String encodedText = encoder.encodeToString(textByte);    return encodedText;}/** * @Method: Decoder * @Description:对文本进行解码 * @param text * @return String * @author FollowFire * @date 2017年12月16日 下午11:21:08 */public static String Decoder(String text) throws UnsupportedEncodingException {    Base64.Decoder decoder = Base64.getDecoder();    String decoderText = new String(decoder.decode(text), "UTF-8");    return decoderText;}/** *  * @Method: main * @Description: * @param * @return void * @author FollowFire * @throws UnsupportedEncodingException * @date 2017年12月16日 下午11:21:16 */public static void main(String[] args) throws UnsupportedEncodingException {    // TODO Auto-generated method stub    System.out.println(Encoder("测试"));    System.out.println(Decoder(Encoder("测试")));}

}

2、Base64实现图片的编码传输

前端代码如下:

<!DOCTYPE html><html> <head>   <meta charset="utf-8" />   <meta name="viewport" content="width=device-width" />   <meta http-equiv="Access-Control-Allow-Origin" content="*" />   <title>base64编码传输</title>   <script type="text/javascript" src="jquery.min.js"></script>   <script type="text/javascript">      var img;    var imgPre;    function preImg(sourceId, targetId) {                        img=window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));               imgPre = document.getElementById(targetId);                imgPre.src = img;               return imgPre;        }           function getBase64Image(img) {        var canvas = document.createElement("canvas");        canvas.width = img.width;        canvas.height = img.height;         var ctx = canvas.getContext("2d");        ctx.drawImage(img, 0, 0, img.width, img.height);        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();    /// var dataURL = canvas.toDataURL("image/"+ext);        var dataURL = canvas.toDataURL("image/png").split("base64,")[1];        return dataURL;    }    function submit( ) {            var image = new Image();            image.src = img;            var base64 = getBase64Image(image);                    console.log(img);                                $.ajax({                type : "post",                url : "http://10.210.0.105:8080/Base64PostImage/getpic",                data : {                    "imgBase64" : base64                },                success : function(data) {                    console.log(data);                    if (data) {                                                 alert(data);                    } else {                        alert("false");                    }                }            });        };      </script>  </head>  <body>   图片   <input type="file" name="image" id="imgOne" onchange="preImg(this.id,'photo');" />   <img id="photo" src="" width="50px" height="50px" style="display: block;" />   <br />   <input type="submit" id="btn" onclick="submit();" />   </body></html>

后台代码如下:

package com.wxy.servlet;import java.io.FileOutputStream;import java.io.IOException;import java.io.OutputStream;import java.io.PrintWriter;import java.util.Base64;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/getpic")public class GenerateImage extends HttpServlet {private static final long serialVersionUID = 1L;    /**     *     *       @Method: DecoderImage     *       @Description: 实现照片的解码    *       @param  imgStr    *       @return boolean    *       @author FollowFire    *       @date 2017年12月17日 上午2:10:54    */public static boolean DecoderImage(String imgStr) {    // 对字节数组字符串进行Base64解码并生成图片    if (imgStr == null) // 图像数据为空    return false;    try {        // Base64解码        byte[] b = Base64.getDecoder().decode(imgStr);        for (int i = 0; i < b.length; ++i) {            if (b[i] < 0) {// 调整异常数据                b[i] += 256;            }        }        // 生成jpeg图片        String imgFilePath = "F:/2/test/new.jpg";// 新生成的图片        OutputStream out = new FileOutputStream(imgFilePath);        out.write(b);        out.flush();        out.close();        return true;    } catch (Exception e) {        System.out.println("error");        return false;    }}protected void doPost(HttpServletRequest request, HttpServletResponse response)        throws ServletException, IOException {    // TODO Auto-generated method stub    PrintWriter out = response.getWriter();    response.setCharacterEncoding("UTF-8");    response.setHeader("Access-Control-Allow-Origin", "*");    String imgBase64 = request.getParameter("imgBase64");    //System.out.println(imgBase64);    System.out.println(DecoderImage(imgBase64));    out.println(DecoderImage(imgBase64));}}

代码下载:http://download.csdn.net/download/m0_37661961/10162199

原创粉丝点击