前端base64全方位解析

一、base64简介

1、什么是base64

Base64是一种用64个字符来表示任意二进制数据的方法。由于二进制数据不太适合在文本协议中传输，所以将二进制数据使用可读的文本表示。这就是base64编码。

2、base64编码流程

function base64(str) {
  let b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';//Base64编码字符表
  let ret = '', i = 0, len = str.length;
  while (i < len) {
    let code = str.charCodeAt(i++) << 16 | str.charCodeAt(i++) <>> 18 & 0x3f) + b64.charAt(code >>> 12 & 0x3f)
         + b64.charAt(code >>> 6 & 0x3f) + b64.charAt(code & 0x3f);
  }
  return ret.substr(0, (len / 3) * 4);//在末尾填充“=”后要去掉。
}

3、base64的优缺点

优点：依靠可打印的ASCII字符表示，可以在任何地方直接显示。

缺点：编码后的数据 原则上比二进制数据多了1/3的长度，长文本的场合，base64编码后的文本长度会明显超过原文，会增加网络传输量。

二、base64的应用

1、图片预览

将图片转换成base64格式后，可以直接将base64码放入标签或者background-image中，实现图片预览效果。

//实现图片上传预览
let input = document.querySelector('input[type="file"]');
input.addEventListener('change', function (e) {
  let files = e.target.files;
  let reader = new FileReader();
  reader.readAsDataURL(files[0]);
  reader.onload = function () {
    document.querySelector('.preview img').src = reader.result;
  }
});

2、跨域传输数据

在前端中使用jsonp或者cors请求时，如果需要将数据发送给跨域服务器，可以使用base64编码传输，以解决一些服务器不能接收非文本数据的问题。

//在URL中传输base64编码后的数据
let img = document.querySelector('.preview img');
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
let context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
let base64 = canvas.toDataURL('image/jpeg');//转为base64编码
let param = encodeURIComponent(base64);//URL编码后作为参数
let url = 'http://www.example.com?img=' + param;

三、base64的安全性

1、base64并不能提高数据的安全性

Base64编码仅仅是一种编码方式，不具有加密功能，base64编码后的数据和明文数据在网络传输中一样容易被截取、篡改或者窃取。所以在传输的时候，还需要使用其他的加密手段来保证数据的安全性。

2、base64的逆转

Base64编码是可以逆转的，也就是可以将base64编码的数据解码成明文数据。所以在传递一些敏感数据时，应该使用其他加密方式配合base64编码来提高过去的安全性。

//加密
let str = 'My Password';
let base64Str = window.btoa(encodeURIComponent(str));//先进行URI编码 再进行base64编码

//解密
let base64Str = 'TXkgUGFzc3dvcmQ=';
let str = decodeURIComponent(window.atob(base64Str));//先进行base64解码 再进行URI解码

四、base64的兼容性

在现代浏览器中，base64的应用非常广泛，特别是在移动端APP内嵌H5 APP中，base64将会是一个重要的手段。不过在一些老旧的浏览器（如IE8及以下）中，对base64的支持不友好，因此需要一些特殊的兼容性处理。

//确保blob对象的兼容性
const Blob = window.Blob || window.webkitBlob;
const URL = window.URL || window.webkitURL;
let img = document.querySelector('.preview img');
let canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
let context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
canvas.toBlob(blob => {
  let xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onload = function () {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send(blob);//发送blob对象
}, 'image/png');

五、结语

base64是一种实用的编码方式，可以在前端中实现很多有用的功能。但是，同时也需要注意它的缺点和安全性。希望大家在使用的时候充分考虑相关问题并且使用。