Base64的简介

Base64是常见的用于传输8Bit字节码的编码方式之一，基于64个可打印字符来标识二进制数据点方法。

使用Base64的编码不可读，需要解码。

Base64实现方式

Base64编码要求把3个8位字节（3*8=24）转化为4个6位的字节（4*6=24），之后在6位的前面补两个0，形成8位一个字节的形式。如果剩下的字符不足3个字节，则用0填充，输出字符使用=，因此编码后输出的文本末尾可能会出现1个或2个=。

Base64就是包括小写字母a-z，大写字母A-Z，数字0-9，符号+和/组成的64个字符的字符集，另外包括填充字符=。任何符号都可以转换成这个字符集中的字符，这个转化过程就叫做Base64编码。

为了保证输出的编码位可读字符，Base64指定了一个编码表，以便进行统一转换，编码表的大小为2^6=64，即Base64名称的由来。

十进制转二进制

十进制数转换为二进制数时，由于整数和小数的转换方法不同，所以先将十进制数的整数部分和小数部分分别转换后，再加以合并。

十进制整数转换为二进制整数采用 "除 2 取余，逆序排列" 法。

具体做法是：用 2 整除十进制整数，可以得到一个商和余数；再用 2 去除商，又会得到一个商和余数，如此进行，直到商为小于 1 时为止，然后把先得到的余数作为二进制数的低位有效位，后得到的余数作为二进制数的高位有效位，依次排列起来。

示例：求十进制34对应的二进制数

Base64编码示例

示例1：对字符串 Son 进行 Base64编码

Son通过Base64编码转换成了U29u，3个ASCII字符刚好转换成对应的Base64字符。

示例2：对字符串 S 进行 Base64编码

字符串S对应1个字节，一共8位，按6位为一组分为4组，每组不足6位的补0，然后在每组的高位补0，找到Base64编码进行转换。

Base64的优缺点

优点：

• 
  
• 
  
  将二进制数据（如图片）转为可打印字符，在HTTP协议下传输
  
  
• 
  
  对数据进行简单加密，肉眼安全
  
  
• 
  
  如果是在html或css中处理图片，可以减少http请求
  
  

缺点：

• 
  
• 
  
  内容编码后体积变大，至少1/3
  
  
• 
  
  编码和解码需要额外工作量
  
  

Base64编码和解码

• 
  
• 
  
  btoa和atob方法：js中有两个函数被分别用来处理编码和解码Base64字符串
  
  • 
    
  • 
    
    btoa()：该函数基于二进制数据字符串创建一个Base64编码的字符串
    
    
  • 
    
    atob()：该函数用于解码使用Base64编码的字符串
    
    
  
  
  

btoa()示例：

let btoaStr = window.btoa(123456)
console.log(btoaStr) // MTIzNDU2

atob()示例：

let atobStr = window.atob(btoaStr)
console.log(atobStr) // 123456

这两个函数容易混淆，可以这样记下，比如btoa是以b字母开头，编码也是以b字母开头。即btoa编码，升序的atob解码。

• 
  
• 
  
  

  第三方库

  
  
  • 
    
  • 
    
    

    js-base64

    
    
    
  • 
    
    

    base64-js

    
    
    
  
  
  

Data URI Scheme

Data URI scheme的目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入，减少请求资源的连接数，缺点是不会被浏览器缓存起来。

Data URI scheme支持的Base64编码的类型比如：

• 
  
• 
  
  data:image/png;base64,base64编码的png图片数据
  
  
• 
  
  data:image/gif;base64,base64编码的gif图片数据
  
  
• 
  
  data:text/javascript;base64,base64编码的javascript代码
  
  

Base64的应用

使用Base64编码资源文件

比如：在html文档中渲染一张Base64的图片

<img :src="data:image/png;base64,IVBORsssssfjsfsfs==" alt="">img>

注意：如果图片较大，在Base64编码后字符串会非常大，影响页面加载进度，这种情况不适合Base64编码。

在HTTP中传递较长的标识信息

比如使用Base64将一个较长的标识符（128bit的UUID）编码为一个字符串，用作表单和http的GET请求中的参数。

标准的Base64编码后不适合直接放在请求的URL中传输，因为URL编码器会把Base64中的/和+变成乱码，即%xxx的形式。我们可以将base64编码改进一下用于URL中，比如Base64中的/和+转换成_和-等字符，避免URL编码器的转换。

canvas生成图片

canvas提供了toDataURL()和toBlob()方法。

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的data URI。可以使用 type 参数其类型，默认为PNG格式。图片的分辨率为 96dpi。

canvas.toDataURL(type, encoderOptions);

使用示例：设置jpeg图片的质量，图片将以Base64存储

let quality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"

HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示 canvas 上的图片；这个图片文件可以被缓存或保存到本地（由用户代理自行决定）。

HTMLCanvasElement.toBlob(callback, type?, quality?)

使用示例：

canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality

读取文件

FileReader.readAsDataURL()方法会读取指定的Blob或File对象。读取操作完成的时候，readyState会变成已完成DONE，并触发 loadEnd事件，同时result属性将包含一个data:URL 格式的字符串（Base64 编码）以表示所读取文件的内容。

读取文件示例：

代码演示可以点击这里查看哦

<input type="file" onchange="previewFile()" />
<br />
<br />
<img src="" alt="导入图片进行预览" />
<script>
  function previewFile() {
    var preview = document.querySelector("img");
    var file = document.querySelector("input[type=file]").files[0];
    var reader = new FileReader();

    reader.addEventListener("load",
      function () {
        preview.src = reader.result;
        console.log(reader.result); // Base64编码的图片格式
      },
      false,
    );

    if (file) {
      reader.readAsDataURL(file);
    }
  }
script>

简单"加密"某些数据

Base64常用作一个简单的“加密”来保护某些数据，比如个人密码我们如果不使用其他加密算法的话，可以使用Base64来简单处理。

Base64是加密算法吗

Base64不是加密算法，只是一种编码方式，可以用Base64来简单的“加密”来保护某些数据。

结语

❤️ 🧡 💛大家喜欢我写的文章的话，欢迎大家点点关注、点赞、收藏和转载！！