JS 实现Base64编码与解码实例详解

Base64是一种将二进制数据编码为ASCII字符的方法。通过该编码方式，可以将二进制数据以可读的方式在不同系统中传输或储存。

什么是Base64

在计算机中，数据存储都是以二进制位（bit）为单位的，但是在我们人类的角度下，二进制是很难读懂的，如00101011。因此为了呈现数据，可以采用16进制、ASCII等方式展示。其中，ASCII编码规范中利用7位二进制编码一个字符，可表示128种不同的字符。

而Base64就是由64个字符（A-Za-z0-9+/）组成的一种编码方式，它的作用就是将二进制数据转换成可读的ASCII字符。

Base64的编码和解码实现

1.编码

Base64的编码方式很简单，首先需要将原始数据转化为二进制数据，然后将其分割成6个一组的数据，最后在前面加上一段开头为字符“ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/” 、长度为64的字符表示Base64的参数表。将获取的每个分组的数值转化为十进制数，然后将十进制数转化为ASCII字符。最后依次得到的ASCII字符组成的字符串就是Base64编码后的结果。

下面是一段实现Base64编码的函数示例：

function encodeBase64(str) {
    //1.定义Base64编码表
    var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    //2.将UTF-8字符串转义为二进制字符串
    var out, i, len;
    var c1, c2, c3;
    len = str.length;
    i = 0;
    out = "";
    while (i < len) {
        c1 = str.charCodeAt(i++) & 0xff;
        if (i == len) {
            out += base64EncodeChars.charAt(c1 >> 2);
            out += base64EncodeChars.charAt((c1 & 0x3) << 4);
            out += "==";
            break;
        }
        c2 = str.charCodeAt(i++);
        if (i == len) {
            out += base64EncodeChars.charAt(c1 >> 2);
            out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
            out += base64EncodeChars.charAt((c2 & 0xF) << 2);
            out += "=";
            break;
        }
        c3 = str.charCodeAt(i++);
        out += base64EncodeChars.charAt(c1 >> 2);
        out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
        out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
        out += base64EncodeChars.charAt(c3 & 0x3F);
    }
    return out;
}

2.解码

解码的过程首先是将Base64编码之后的字符串转化为二进制数据，然后将其以6个一组的形式分割，再将每个分组先转化为十进制数，再将十进制数转化为二进制数据，最后将二进制数据转化为UTF-8字符串即可。

下面是一段实现Base64解码的函数示例：

function decodeBase64(str) {
    //1.定义Base64编码表
    var base64DecodeChars = new Array(
        -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
        -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
        -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,
        52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1,
        -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
        16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, 63, -1,
        26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41,
        42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1, -1
    );

    //2.将Base64字符串转为二进制输入流
    var c1, c2, c3, c4;
    var i, len, out;
    len = str.length;
    i = 0;
    out = "";
    while (i < len) {
        do {
            c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
        } while (i < len && c1 == -1);
        if (c1 == -1)
            break;

        do {
            c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
        } while (i < len && c2 == -1);
        if (c2 == -1)
            break;

        out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));

        do {
            c3 = str.charCodeAt(i++) & 0xff;
            if (c3 == 61)
                return out;
            c3 = base64DecodeChars[c3];
        } while (i < len && c3 == -1);
        if (c3 == -1)
            break;

        out += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2));

        do {
            c4 = str.charCodeAt(i++) & 0xff;
            if (c4 == 61)
                return out;
            c4 = base64DecodeChars[c4];
        } while (i < len && c4 == -1);
        if (c4 == -1)
            break;

        out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
    }
    return out;
}

Base64编码与解码实例

下面我们提供两个Base64编码与解码实例，以便更好的理解其实现原理。

示例1

下面的代码展示如何将一张图片文件转化为Base64编码形式，并在HTML中展示该图片：

<html>
    <head><title>Base64图片展示示例</title></head>
    <body>
        <script>
            function getImageBase64() {
                var file = document.getElementById('image').files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function(event) {
                        document.getElementById('showImage').innerHTML = '<img src="' + event.target.result + '"/>';

                        //将Base64编码结果存在textarea中
                        document.getElementById('base64Code').value = event.target.result;
                    }
                }
            }
        </script>
        <h1>Base64图片展示示例</h1>
        <input type="file" id="image" onchange="getImageBase64();" />
        <div id="showImage"></div>
        <textarea id="base64Code"></textarea>
    </body>
</html>

其中，利用FileReader对象读取图片文件，利用onload事件及img[src]定义样式展示图片，同时利用textarea将图片内容以Base64编码的方式展示出来。

示例2

下面的示例展示Base64编码和解码的过程：

var str = "Hello world!";
var base64Code = encodeBase64(str);
console.log("原始字符串：" + str);
console.log("Base64编码：" + base64Code);

var decodeStr = decodeBase64(base64Code);
console.log("解码后字符串：" + decodeStr);

运行该代码，可以看到以下输出结果：

原始字符串：Hello world!
Base64编码：SGVsbG8gd29ybGQh
解码后字符串：Hello world!

总结

Base64编码与解码是数据传输及存储中常用的方式，在不同的编程语言中均有实现。通过本篇文章，我们详细讲解了Base64的编码和解码原理及实现，并提供了两个实际的代码示例，相信读者可以在实际应用中更好地掌握Base64的使用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS 实现Base64编码与解码实例详解 - Python技术站

JS 实现Base64编码与解码实例详解