前端编码base64

最新推荐文章于 2024-06-24 14:13:43 发布
最新推荐文章于 2024-06-24 14:13:43 发布
阅读量3.1k 收藏 1
点赞数
分类专栏： base64

原文

什么是base64

base64是用规定的64种字符来表示任意二进制数据的一种编码格式，而且这64种字符均是可见字符，而之所以要是可见的是因为在不同设备上处理不可见字符时可能发生错误。通常，电子邮件数据、公钥证书会经常使用。

base64编码原理

字符集

image

编码规则

我们知道单个字符一般用一个字节就可以表示(中文等其他特殊文字除外),而一个字节由8位二进制数构成。那么base64编码中,是将每6位二进制作为一个单位解析后参照字符集的索引就可以得到编码后的字符。举个例子:

二进制数据：000001 000011

编码后:BD
  • 1
  • 2
  • 3
  • 4

但是我们发现一个问题，就是我们单个字符是8位二进制,而base64编码时需要以6位二进制数位单位进行编码。那么多余的2位怎么去处理呢？看下面的栗子

未编码的字符串:B

对应的二进制数据: 010000 10

对残缺的二进制进行补足:010000 100000 000000 000000

编码后:Qg==
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

通过上面的栗子我们可以发现，base64编码时会将二进制通过在末尾补0的方式使其位数满足24的倍数。这样刚好能够编码出至少4个字符。从上面的栗子中我们可以看到=号的数量刚好是缺少2个字节数的数量，而g则是因为多余的2位二进制数补了4个0后编码成了g。所以我们就可以看到这样的编码了。如果还不理解再举一些栗子

未编码的字符串:BD

对应的二进制数据: 010000 100100 0100

对残缺的二进制进行补足:010000 100100 010000 000000

编码后:QkQ=
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

关于解码

这里不做详细解释，因为知道编码规则后，反过来就可以实现解码了。

原生JS实现其编码与解码

如果对JS熟悉的同学，可能会想到window对象的atob()和btoa()方法。但是只有在较新的游览器中才能使用，面对老的游览器，我们只能靠原生的JS自己造轮子了。

但是光知道编码原理一定够吗？这里依然存在两个问题:

  • 如何将字符串解析成二进制数据
  • 如何对中文字符进行编码

JS解析字符串为二进制数

首先在页面中所有的字符串都是基于unicode编码的,然后js的字符串中刚好有charCodeAt()方法返回指定字符的unicode编码对应的数值，这个数值就是二进制数表示的数值，我们只需要将其转换为二进制即可。熟悉c或者c++的同学可能会想到用不断的除2看余数的方式来求出这个数的二进制表示。但是在JS已经有现成的方法了。


var str = 'ABCD',
    i,
    len,
    result = '';
for( i = 0 , len = str.length ; i < len ; i++){
    result += str.charCodeAt(i).toString(2)
}
console.log(result);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

编码中文字符

网页中编码格式基本都是UTF-8,然而即便我们用UTF-8格式保存了HTML文件，但是其中的中文字符依然是以UTF-16的形式保存的。所以我们首先要对utf-16的汉字转为utf-8形式保存的汉字。代码如下:

   // 将单个字符的unicode转换为以UTF-8格式的二进制数据
    function toUTF8Binary(unicode){
        var len,
            binary = '',
            star = 0,
            bitStream = unicode.toString(2), // 转换为二进制比特流
            bitLen = bitStream.length,
            i;
        if( unicode >= 0x000000 && unicode <= 0x00007F ){
            binary = bitStream;
            for( i = 0 , len = 8 ; i　< len-bitLen ; i ++ ){
                binary = 0 + binary; // 不足8位补0
            }
        }else if( unicode >=0x000080 && unicode <=0x0007FF ){
            binary = bitStream;
            for( i = 0 , len = 11 ; i　< len-bitLen ; i ++ ){
                binary = 0 +binary; // 不足11位补0
            }
            binary = '110' +
                     binary.substr(0,5) + 
                     '10' + 
                     binary.substr(5,6);
        }
        else if( unicode >=0x000800 && unicode <=0x00FFFF ){
            binary = bitStream;
            for( i = 0 , len = 16 ; i　< len-bitLen ; i ++ ){
                binary = 0 +binary; // 不足16位补0
            };
            binary = '1110' + 
                     binary.substr(0,4) + 
                     '10' + 
                     binary.substr(4,6) + 
                     '10' + 
                     binary.substr(10,6);
        }
        else if( unicode >=0x010000 && unicode <=0x10FFFF ){
            binary = bitStream;
            for( i = 0 , len = 21 ; i　< len-bitLen ; i ++ ){
                binary = 0 +binary; // 不足21位补0
            }
            binary = '11110' + 
                     binary.substr(0,3) + 
                     '10' + 
                     binary.substr(3,6) + 
                     '10' + 
                     binary.substr(9,6) +
                     '10' + 
                     binary.substr(15,6);
        }
        return binary;
    }
  • 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
  • 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
  • 52

以上两个问题解决了，就可以按照编码规则实现对base64的编码与解码了

最后附上完整代码

JS文件代码:

var codeHandler = (function(){
    var base64Chars = [
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
            'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
            'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
            'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
            'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
            'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
            'w', 'x', 'y', 'z', '0', '1', '2', '3',
            '4', '5', '6', '7', '8', '9', '+', '/'
        ],
        encode = {
            'base64':codeBase64
        },
        decode = {
            'base64':decodeBase64
        }
    handleFormat = {
        'utf-8':toUTF8Binary
    };
    function stringToBinary(str , size , encodeType ){
        //  str-字符串 , size - 转换后的二进制位数 ,encodeType - 采用什么格式去保存二进制编码
        var i,
            len,
            binary = '';
        for ( i = 0 , len = str.length ; i < len ; i++ ){
            binary = binary + handleFormat[encodeType.toLowerCase()](str.charCodeAt(i));
        }
        console.log(binary);
        return binary;
    }
    // 转换为以UTF-8格式的二进制数据
    function toUTF8Binary(unicode){
        var len,
            binary = '',
            star = 0,
            bitStream = unicode.toString(2), // 转换为二进制比特流
            bitLen = bitStream.length,
            i;
        if( unicode >= 0x000000 && unicode <= 0x00007F ){
            binary = bitStream;
            for( i = 0 , len = 8 ; i　< len-bitLen ; i ++ ){
                binary = 0 +binary; // 不足8位补0
            }
        }else if( unicode >=0x000080 && unicode <=0x0007FF ){
            binary = bitStream;
            for( i = 0 , len = 11 ; i　< len-bitLen ; i ++ ){
                binary = 0 +binary; // 不足11位补0
            }
            binary = '110'+binary.substr(0,5) + '10' + binary.substr(5,6);
        }
        else if( unicode >=0x000800 && unicode <=0x00FFFF ){
            binary = bitStream;
            for( i = 0 , len = 16 ; i　< len-bitLen ; i ++ ){
                binary = 0 +binary; // 不足16位补0
            };
            binary = '1110' + 
                     binary.substr(0,4) + 
                     '10' + 
                     binary.substr(4,6) + 
                     '10' + 
                     binary.substr(10,6);
        }
        else if( unicode >=0x010000 && unicode <=0x10FFFF ){
            binary = bitStream;
            for( i = 0 , len = 21 ; i　< len-bitLen ; i ++ ){
                binary = 0 +binary; // 不足21位补0
            }
            binary = '11110' + 
                     binary.substr(0,3) + 
                     '10' + 
                     binary.substr(3,6) + 
                     '10' + 
                     binary.substr(9,6) +
                     '10' + 
                     binary.substr(15,6);
        }
        return binary;
    }
    // 编码成base64格式
    function base64Parse(binary24,flag){
        var i,
            len,
            result = '',
            decode;
        if(flag == 1){
            for( i = 0 ; i < 4 ; i++){
                decode = parseInt(binary24.substr(i*6,6),2);
                result = result + base64Chars[decode];
            }
        }
        else{
            for ( i=0 , len = Math.floor(flag/6) ;i<len+1; i++){
                decode = parseInt(binary24.substr(i*6,6),2);
                result = result + base64Chars[decode];
            }
            for( i = 0; i < 3-len ;i ++){
                result = result + '=';
            }
        }
        return result;
    }
    // 解析为base64格式的二进制数据
    function codeBase64(str){
        var i,
            len,
            rem,
            mer,
            result = '',
            strBinaryAry = [],
            binary = stringToBinary(str , 8 , 'utf-8'); // base64是基于utf-8格式保存的二进制数据转换的
        len = binary.length;
        mer = Math.floor(len / 24);
        rem = len % 24;
        for( i = 0 ; i < mer ; i++){
            result = result +  base64Parse(binary.substr(i*24,24),1);
        }
        remCode = binary.substr(len-rem,rem);
        if( rem > 0 ){
            for( i =0 ; i < 24-rem ; i++){
                remCode = remCode + 0;
            }
            result = result +  base64Parse(remCode,rem)
        }
        return result;

    }
    // 解码base64格式的数据
    function decodeBase64(str){
        var i,
            j,
            k,
            len,
            t = 0,
            curbinary,
            start  = 0 ,
            flag = [
                {
                    str:'0',
                    len:8
                },
                {
                    str:'110',
                    len:11
                },
                {
                    str:'1110',
                    len:16
                },
                {
                    str:'11110',
                    len:21
                }],
            binary= '',
            newStr = '';
        for( i = 0 , len = str.length ; i < len ; i++){
            var curbinary  = base64Chars.indexOf(str.charAt(i)).toString(2);
            if( curbinary != '-1'){

                for( j = 0 ; curbinary.length <6 ; j++){
                    curbinary = 0 + curbinary;
                }
                binary = binary + curbinary;
            }
            if( i >= len-2 && str.charAt(i) == '='){
                ++t;
            }
        }
        if( t == 0 ){
            len = binary.length;
        }
        else{
            len = binary.length - (6-2*t)
        }

        for( ; start < len ;){
            for( j  = 0 ; j < 4 ; j++){

                if(binary.indexOf( flag[j].str ,start) == start){
                    if(flag[j].len == 8){
                        newStr = newStr +  String.fromCharCode(parseInt(binary.substr(start,8),2));
                    }
                    else if(flag[j].len == 11){
                        newStr = newStr + 
                                 String.fromCharCode(parsetInt(binary.substr(start+3,5) + 
                                 binary.substr(start+10,6),2));
                    }
                    else if(flag[j].len == 16){
                        newStr = newStr + 
                                 String.fromCharCode(parsetInt(binary.substr(start+4,4) + 
                                 binary.substr(start+10,6) + 
                                 binary.substr(start+18,6),2));
                    }
                    else if(flag[j].len == 21){
                        newStr = newStr + 
                                 String.fromCharCode(parseInt(binary.substr(start+5,3) + 
                                 binary.substr(start+10,6) + binary.substr(start+18,6) +
                                 binary.substr(start+26,6),2));
                    }
                    start  =  start  + flag[j].len;
                    break;
                }
            }
        }
        binary = null;
        return newStr;
    }
    return {
        encode:function(str ,type){
            return encode[type](str);
        },
        decode:function(str, type){
            return decode[type](str);
        }
    };
})();
  • 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
  • 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
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218

HTML文件

<!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>codeHandler</title>
    </head>    
    <body>
        <p>base64编码</p>
        <input id='test' type='text'></input>
        <button id="testButton">处理</button>
        <p>base64解码</p>
        <input id='test1' type='text'></input>
        <button id="testButton1">处理</button>
        <p id="showResult"></p>
        <script src="js/codeHandler.min.js"></script>
        <script>
            var input1 = document.getElementById('test'),
                button1 = document.getElementById('testButton'),
                input2 = document.getElementById('test1'),
                button2 = document.getElementById('testButton1'),
                show = document.getElementById('showResult');
            button1.onclick = function(){
                show.innerHTML =  codeHandler.encode(input1.value,'base64');
            }

            button2.onclick = function(){
                show.innerHTML =  codeHandler.decode(input2.value,'base64');
            }
        </script>
    </body> 
</html>
bigMonsterInIAm
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端Base64编码
Aiolimp的博客
04-12 2316
Base64编码 什么是Base64编码 我们所看到的网页上的每一个图片，都是需要消耗一个 http 请求下载而来的，不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而 base64 正好能解决这个问题。 图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。 如图所示：google搜索框右侧的搜索小图标使用的就是base64编码 在css里的写法： #fkbx-spch, #
base64加密解密方法 亦适合富文本转义
Aa__Ki的博客
08-16 454
在这里插入代码片 ```export var Base64 = { _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", encode: function (e) { var t = ""; var n, r, i, s, o, u, a; var f = 0; e = Base64._utf8_encode(e); while (f < e.lengt
前端Base64编码知识,一文打尽
趣谈前端
08-18 1205
原文: https://juejin.cn/post/6989391487200919566作者: 云的世界掘金专栏: 前端基础进阶健康满分关注并将「趣谈前端」设为星标每天定时分享技术...
使用 axios 拦截器解决「 前端并发冲突 」 问题
最新发布
2401_83384536的博客
06-24 735
并发问题很常见，处理起来又相对繁琐，前端解决并发冲突时，可以利用axios拦截器统一处理重复请求，简化业务代码。同时axios拦截器支持更多应用，本文提供了部分常用扩展功能的实现，感兴趣的同学可以继续挖掘补充拦截器的其他用法。今天的内容就这么多，希望对你有帮助。
1：创建项目工程(1)
2401_84097436的博客
05-04 779
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
base64编码解码器
10-23
总的来说，"base64编码解码器"是处理二进制数据的重要工具，无论是后端的C++实现还是前端的应用场景，Base64编码都在数据传输和存储中扮演着不可或缺的角色。了解和掌握Base64编码解码原理及其实现方法，对于开发者...
纯javascript前端实现base64图片下载(兼容IE10+)
10-18
在现代Web应用中，前端开发时常遇到需要将Base64编码的图片下载到用户本地的情况。Base64是一种用于在网络上传输二进制数据的方法，它将二进制数据转换成ASCII字符串，使得数据可以在纯文本环境下传输。本文将详细...
python将图片转base64,实现前端显示
09-18
2. 编码结果的使用：编码后的Base64字符串可以直接嵌入到前端代码中。在HTML中，可以使用data URIs方案将图片以Base64字符串的形式内嵌到标签的src属性中。这样浏览器可以解析并显示图片。例如：;base64,这里是base...
AngularJS实现的base64编码与解码功能示例
10-18
在前端开发中，base64编码是一种经常使用的编码方式，特别是在JavaScript中。AngularJS作为一款前端框架，提供了强大的数据绑定、依赖注入和模块化等特性，使得在AngularJS中实现base64编码和解码变得十分便捷。本...
JS在浏览器中解析Base64编码图像
10-20
总之，Base64编码在前端开发中是一种有效的嵌入图像的方法，它能够减少请求次数，加快页面加载速度，但也需要注意其对数据大小的影响，以及需要考虑对旧浏览器的兼容性问题。在实现时，要合理选择使用场景，例如对于...
前端图片转base64
04-07
通过绑定按钮来触发图片选择,获得图片的base64编码,类型,名称 可用于图片异步上传,或者在线预览,基于WebUploader
Base64编码和解码的应用（前后端程序）
12-17
前端实现Base64对文本和图片的编码，后端用Java Servlet作为接口实现编码的解码.
js的base64（base64.js）
06-01
js的base64（base64.js）
原生js实现base64编码与解码字符串及对象
darling331的博客
04-07 1548
转载地址 一. Window 中的 btoa()和atob()解决字符串 该编码和解码只实用于字符串。btoa()该方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符来编码字符串，返回一个 base-64 编码的字符串；atob() 用于解码。使用方法：编码：const newBase = window.btoa("test")；解码：const oldVal...
原生js实现Base64编码解码
de3597的博客
10-23 349
注：ie10+ var str = window.btoa("liusong"); console.log(str); var s = window.atob("bGl1c29uZw==") console.log(s); //应对中文解析 var ss = window.btoa(window.encodeURI("刘松")); console.log(ss); var...
前端实现base64编码处理
感谢您阅读我的博客，如果您有任何问题或建议，请随时联系我。
03-23 4285
前端处理base64的步骤
前端实现 base64 编码和解码
热门推荐
明天也要努力的博客
10-24 1万+
1. base64简介 Base64：选出64个字符作为一个基本字符集（A-Z，a-z，0-9，+，/，再加上作为垫字的"="，实际是65个字符），其它所有符号都转换成这个字符集中的字符。 编码规则： 将每三个字节作为一组，一共是24个二进制位。 将这24个二进制位分为四组，每个组有6个二进制位。 在每组前面加两个00，扩展成32个二进制位，即四个字节。 根据下表，得到扩展后的每个字节的对应符号，这就是Base64的编码值。 js-base64 npm地址 1. 安装 npm install --s
前端理解base64
qq_33712668的博客
03-02 1806
一、背景：ascii码 字符=>二进制 计算机中所有数据的存储都是以二进制模式，比如想要存储abcd需将其转化为二进制，具体用哪些二进制来表示哪个符号*，有一个统一的编码规则，这就是ascii。 ASCII 码使用指定的7 位或8 位二进制数组合来表示128 或256 种可能的字符。（2的八次方=256，8个bit可以用来表示0-255） 0-127可以表示大小写的26个字母、加减乘除符号、阿拉伯数据还有控制字符比如换行符等。 观察百度百科上的ascii码表（128个字符）可以发现第八位都是0，等于
前端base64编码转图片
04-18
你可以使用以下 JavaScript 代码将 base64 编码转换成图片： ``` var img = new Image(); img.src = 'data:image/png;base64, ' + base64Code; document.body.appendChild(img); ``` 其中， `base64Code` 是 base...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值