base64编码

SnowBall
278 阅读4分钟

base64编码

  • Base64编码要求把3个8位字节（3*8=24）转化为4个6位的字节（4*6=24），之后在6位的前面补两个0，形成8位一个字节的形式。 如果剩下的字符不足3个字节，则用0填充，输出字符使用'='，因此编码后输出的文本末尾可能会出现1或2个'='。
  • 为了保证所输出的编码为可读字符，Base64制定了一个编码表，以便进行统一转换。编码表的大小为2^6=64，这也是Base64名称的由来。
  • Base64言下之意是一种基于64个可打印字符来表示二进制数据的表示方法!它是一种将二进制编码转换为可打印字符一种。它是MIME编码里面非常常见一种可逆转换二进制方法！ 由于2的6次方等于64，所以每6个位为一个单元，对应某个可打印字符。三个字节有24个位元，可以对应4个Base64单元，因此3个字节需要用4个base64单元来表示！如：MaN对应base64是：TW Fu ! 这64个可打印字符a-z,A-Z,0-9就占62字符，剩下2个字符不同系统可能使用不同，经常是:“+/”。base64编码后，文档大小为原先的4/3，里面所有字节（包括常见可打印字符）也编码了！

为什么需要base64

计算机中的一个字节是由八个二进制数组成的，那总共就有256个组合，对应的就是ASCII编码，而ASCII编码前32位是表示翻页等功能的控制符，128～255之间的值是不可见字符。所以就造成了计算机传输中有些ASCII不可见从而丢失或者转义错误的情况！

Base64编码就是一种有效显示这些信息的解决方案，简单来说它就是将原始数据转换成二进制之后进行再编码，而这个再编码的每一个单位是由6个二进制数组成，总共有64种组合，而这64个值都是我们能够正常显示和传输的。

实现

// base64编码
//获取到从A-Z的字符串： item+index是码点,从码点到字符
let STR=new Array(26).fill(65).map((item,index)=>
    String.fromCodePoint(item+index)).join('')
// 获取到从a-z的字符串：小写a从97开始      
let str=new Array(26).fill(97).map((item,index)=>
    String.fromCodePoint(item+index)).join('')
// 字符集
const base64Code= STR+str+'0123456789+/'
function toBase64(str){
    let item='',enCode='',res=''
    //码元转为二进制，不足8位的在左侧补
   var code= str.split('').reduce((pre,cur)=>
        pre+cur.charCodeAt().toString(2).padStart(8,'0'),'')
        //?????
    if(code.length%24===8){
        code+='0000'//12-8
        res+='=='
    }
    if(code.length%24===16){
        code+='00'//18-16
        res+='='
    }
    for(let i=0;i<code.length;i+=6){
        item=code.slice(i,i+6)
        enCode+=base64Code[parseInt(item,2)]
    }
    return enCode+res
}
toBase64('jsvue')

应用

电子邮件

现常用于电子邮件中，邮件类型声明如：Content-Transfer-Encoding: base64

canvas图片生成

canvas的 toDataURL可以把canvas的画布内容转base64编码格式包含图片展示的 data URI。

canvas.toDataURL(type, encoderOptions);

文件读取

FileReader的 readAsDataURL可以把上传的文件转为base64格式的data URI

jwt

jwt由header, payload,signature三部分组成,前两个使用base64编码

小图片

img或css背景图的url

简单的数据加密 和 混淆加密代码

优缺点

优点

  1. 可以将二进制数据转化为可打印字符，方便传输数据
  2. 对数据进行简单的加密
  3. 如果是在html或者css处理图片，可以减少http请求

减少http请求？

  • 采用Base64的编码方式将图片直接嵌入到网页中，而不是从外部载入，这样就减少了HTTP请求。
  • 但图片经过 base64 编码后会变大，增大 HTML 页面的大小，影响加载速度。所以要合理使用此方式，常用在 webpack 的 url-loader 中使用

缺点

  1. 内容编码后体积变大， 至少1/3
    因为是三字节变成四个字节，当只有一个字节的时候，也至少会变成三个字节。
  2. 编码和解码需要额外工作量

补充

  • padStart()  方法用另一个字符串填充当前字符串(如果需要的话，会重复多次)，以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。

参考资料

avatar
文章
阅读
粉丝