深入浅出JavaScript中base64编码原理

 更新时间:2023年02月26日 11:47:02   作者:JyLie  
今天翻开旧项目发现挺多图片相关的插件都是用 base64 来显示图片的。谈到 base64,脑海遐想翩翩,思绪回荡之下 base64 瑕瑜互见。这篇文章主要是记录了工作中遇见的问题并加以总结,如有不妥请指正

前言

平静之下,蓦然回首,base64 却在灯火阑珊处。

今天翻开旧项目发现挺多图片相关的插件都是用 base64 来显示图片的。谈到 base64,脑海遐想翩翩,思绪回荡之下 base64 瑕瑜互见。本文旨在记录工作中遇见的问题并加以总结,如有不妥请指正~

base64 由来

base64 是网络传输 8Bit 字节代码的编码方式之一,是一种基于 64 个可打印字符来表示二进制数据的方法。在做支付系统时,报文交互都需要使用 base64 对明文进行转码,然后再进行签名或加密,之后再进行(或再次 base64 转码)传输。那么,base64 到底起到什么作用呢?

在参数传输的过程中经常遇到的一种情况:使用全英文的字符串没问题,但一旦涉及到中文就会出现乱码的情况。与此类似,网络上传输的字符并不全是可打印的字符,比如二进制文件、图片等。base64 的出现就是为了解决此问题,它是基于 64 个可打印的字符来表示二进制的数据的一种方法。

电子邮件刚问世的时候,只能传输英文,但后来随着用户的增加,中文、日韩俄文等文字的用户也有需求,但这些字符并不能被服务器或网关有效处理,因此 base64 就登场了。随后,base64 在 URL、Cookie、网页传输少量二进制文件中也有相应的使用。

base64 的编码原理

基于a-zA-Z0-9+/这 64 个字符来标识二进制数据,另外=符号用于当字节缺位时补用。

base64 编码对照表

base64 编码对照表

索引对应字符索引对应字符索引对应字符索引对应字符
0A17R34i51z
1B18S35j520
2C19T36k531
3D20U37l542
4E21V38m553
5F22W39n564
6G23X40o575
7H24Y41p586
8I25Z42q597
9J26a43r608
10K27b44s619
11L28c45t62+
12M29d46u63/
13N30e47v
14O31f48w
15P32g49x
16Q33h50y

base64 的编码转换规则

base64 要求把每三个 8Bit 的字节转换四个 6Bit 的字节(3*8 = 4*6 = 24),然后把 6Bit再添两位高位 0,组成四个 8Bit 的字节(4*8=32)。

为什么使用 3 个字节一组呢?因为 6 和 8 的最小公倍数为 24,三个字节正好 24 个二进制位,每 6 个 bit 位一组,恰好能够分为 4 组。

同时用于分组后每组添加两个高位 0,转换后的字符串理论上将要比原来的字符长 1/3(24/32=1/3)

步骤分解:

  • 将待转换的字符串每三个字符分为一组,每个字符字节占 8bit,那么共有 24 个二进制位。
  • 将 24 个二进制位每 6 个字节为一组,共分为 4 组。
  • 在每组 6 字节前面添加两个 0,每组由 6 字节变为 8 字节二进制位,组成总共 32 个二进制位,即四个字节。
  • 根据 base64 编码对照表获得对应的值。

举个栗子

1.以标准 3 个字符LJY为例。

  • LJY 对应的 ASCII 码值分别为 76、74、89,对应的二进制值是 01001100、01001010、01011001。由此组成一个 24 位的二进制位字符串。
  • 将 24 位的二进制位字符串,按照每 6 位二进制位一组分成 4 组。
  • 对 4 组 每组 6 位二进制位字符串前面补两个 0,每组扩展为 8 位二进制位,4 组共扩展成 32 个二进制位,此时 4 组二进制位分别为:00010011、00000100、00101001、00011001。其对应的 base64 编码索引为:19、4、41、25。

2.用 base64 编码索引值在 base64 编码表中进行查找,分别对应:T、E、p、Z。

因此LJYbase64 编码之后就变为:TEpZ。

|   文本           |    L     |    J     |    Y     |
|  ASCII          |    76    |    74    |    89    |
| 二进制位         | 01001100 | 01001010 | 01011001 |
| 分组二进制       | 010011   | 000100   | 101001   | 011001   |
| 分组二进制补2个0 | 00010011 | 00000100 | 00101001 | 00011001 |
| 分组索引         |   19     |   4      |   41     |   25     |
| base64编码       |   T     |   E      |    p      |   Z      |

主要展示:

转换前二进制位: 01001100 01001010 01011001

转换后二进制位: 00010011 00000100 00101001 00011001

字符位数不足情况

上述栗子是面向刚好三个字符为一组的情况。当然不是所有时候都这么巧字符位数足够,除此以外有位数不足的情况。那么,面对字符位数不足的情况下该如何处理呢?

base64 给出的方案是,当每组字符不足三位时,不足位数位置需要使用=符号补上。

位数不足情况处理情景:

  • 位数缺一个字节:一个字节共 8 个二进制位,依旧按照规则进行分组。此时共 8 个二进制位,每 6 个一组,则第二组缺少 4 位,用 0 补齐,得到两个 base64 编码,而后面两组没有对应数据,都用=补上。
  • 位数缺两个字节:两个字节共 16 个二进制位,依旧按照规则进行分组。此时总共 16 个二进制位,每 6 个一组,则第三组缺少 2 位,用 0 补齐,得到三个 base64 编码,第四组完全没有数据则用=补上。

位数不足图解如下:

<!-- 缺2位字符,字符串以A为例转换base64后位QQ== -->
|   文本(1Byte)  |    A     |          |          |
| 二进制位         | 01000001 |          |          |
| 分组二进制       | 010000   | 010000   |          |          |
| 分组二进制补0    | 00010000 | 00010000 |          |          |
| 分组索引         |   16     |   16     |          |          |
| base64编码       |   Q     |   Q      |    =      |   =      |

<!-- 缺1位字符,字符串以AB为例转换base64后位QUI= -->
|   文本(1Byte)  |    A     |     B    |          |
| 二进制位         | 01000001 | 01000010 |          |
| 分组二进制       | 010000   | 010100   |  001000  |          |
| 分组二进制补0    | 00010000 | 00010100 | 00001000 |          |
| 分组索引         |   16     |   20     |    8      |          |
| base64编码       |   Q     |   U      |    I      |   =      |

列举了一个字符到三个字符转换为 base64 ,可以发现将 base64 就是按照 base64 编码对照表来将二进制转换为字符串,使得数据不能直接明文展示出来,但也算不上是加密,而这巧好可用在传输、存储、表示二进制领域的情景。

  • 另外值得注意的是,不用语言如中文有多种编码(比如:utf-8、gb2312、gbk 等),不同编码对应 base64 编码结果都不一样。
  • 其次在推演过程中可发现 base64 即用 6 位字节(2 的 6 次幂就是 64)表示字符同理,Base32 就是用 5 位字节,Base16 就是用 4 位字节。大家可以按照上面的步骤进行演化测试。

base64 优缺点

知道 base64 是什么后,也该到为什么出现了。为什么要是使用 base64 呢,这要从其优缺点入手来选择适合场景了。

优势:

  • base64 适合不同平台、不同语言的传输;
  • 页面中内嵌使用 base64 格式的小图片,可减少了服务器访问次数;
  • 二进制位转换 base64 算法简单,对性能影响不大;

缺点

1.二进制文件转换为 base64 后,体积大概增加 1/3;

  • 在基于 Android6.0 及以下默认浏览器实测场景中发现,某些机型如中兴上传 base64 图片会因为字符大小过大导致上传奔溃的情况。
  • 字符长度过大的 base64 不适应使用在 URL 情景,因为 IOS 端浏览器会限制 URL 长度,当长度超过时会自动切除多余部分,导致数据丢失。
  • base64 字符过大会导致页面加载速度变慢,因此建议 10kb 以下的图片使用。

2.base64 无法缓存,要缓存只能缓存包含 base64 的文件,比如 js 或者 css;

3.面对大文件时,会消耗一定的 CPU 进行编解码

JavaScript 的 base64 转码方法

Web API 二进制与 base64 转换

atob(encodedData) : 解码一个 base64 编码的字符串。

enCodedData,是一个通过 btoa() 方法编码的字符串, 为二进制字符串包含 base64 编码的数据。并返回包含来自 encodedData 的解码数据的 ASCII 字符串。

btoa(stringToEncode) : 创建一个 bas64 编码的字符串。

stringToEncode 为要编码的二进制字符串。并返回包含 stringToEncode 的 base64 表示形式的 ASCII 字符串。

另外在 JavaScript 中,字符串使用 UTF-16 字符编码表示:在这种编码中,字符串表示为 16 位(2 字节)单元的序列。每个 ASCII 字符都可以放入其中一个单元的第一个字节,但许多其他字符不能。

base64 在设计上需要二进制数据作为其输入。就 JavaScript 字符串而言,这意味着每个字符只占用一个字节的字符串。因此,如果将一个字符串传递到 btoa()中,其中包含占用多个字节的字符,则会出现错误,因为这不被视为二进制数据,因此超 16 位字符在使用 btoa()时需要先对字符转码为二进制位。

// 简单数据
const encodedData = btoa('Hello, world'); // encode a string
const decodedData = atob(encodedData); // decode the string

/* 复杂数据 */
// convert a Unicode string to a string in which
// each 16-bit unit occupies only one byte
function toBinary(string) {
  const codeUnits = new Uint16Array(string.length);
  for (let i = 0; i < codeUnits.length; i++) {
    codeUnits[i] = string.charCodeAt(i);
  }
  const charCodes = new Uint8Array(codeUnits.buffer);
  let result = '';
  for (let i = 0; i < charCodes.byteLength; i++) {
    result += String.fromCharCode(charCodes[i]);
  }
  return result;
}
function fromBinary(binary) {
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < bytes.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }
  const charCodes = new Uint16Array(bytes.buffer);
  let result = '';
  for (let i = 0; i < charCodes.length; i++) {
    result += String.fromCharCode(charCodes[i]);
  }
  return result;
}

// a string that contains characters occupying > 1 byte
const myString = '☸☹☺☻☼☾☿';

const converted = toBinary(myString);
const encoded = btoa(converted);
console.log(encoded); // OCY5JjomOyY8Jj4mPyY=

const decoded = atob(encoded);
const original = fromBinary(decoded);
console.log(original); // ☸☹☺☻☼☾☿

兼容性:atob() 方法不支持 IE9 及更早的 IE 版本。

base64 转二进制

// base64编码表
const map = {
  0: 52,
  1: 53,
  2: 54,
  3: 55,
  4: 56,
  5: 57,
  6: 58,
  7: 59,
  8: 60,
  9: 61,
  A: 0,
  B: 1,
  C: 2,
  D: 3,
  E: 4,
  F: 5,
  G: 6,
  H: 7,
  I: 8,
  J: 9,
  K: 10,
  L: 11,
  M: 12,
  N: 13,
  O: 14,
  P: 15,
  Q: 16,
  R: 17,
  S: 18,
  T: 19,
  U: 20,
  V: 21,
  W: 22,
  X: 23,
  Y: 24,
  Z: 25,
  a: 26,
  b: 27,
  c: 28,
  d: 29,
  e: 30,
  f: 31,
  g: 32,
  h: 33,
  i: 34,
  j: 35,
  k: 36,
  l: 37,
  m: 38,
  n: 39,
  o: 40,
  p: 41,
  q: 42,
  r: 43,
  s: 44,
  t: 45,
  u: 46,
  v: 47,
  w: 48,
  x: 49,
  y: 50,
  z: 51,
  '+': 62,
  '/': 63,
};

function base64to2(base64) {
  let len = base64.length * 0.75; // 转换为int8array所需长度
  base64 = base64.replace(/=*$/, ''); // 去掉=号(占位的)

  const int8 = new Int8Array(len); //设置int8array视图
  let arr1,
    arr2,
    arr3,
    arr4,
    p = 0;

  for (let i = 0; i < base64.length; i += 4) {
    arr1 = map[base64[i]]; // 每次循环 都将base644个字节转换为3个int8array直接
    arr2 = map[base64[i + 1]];
    arr3 = map[base64[i + 2]];
    arr4 = map[base64[i + 3]];
    // 假设数据arr 数据 00101011 00101111 00110011 00110001
    int8[p++] = (arr1 << 2) | (arr2 >> 4);
    // 上面的操作 arr1向左边移动2位 变为10101100
    // arr2 向右移动4位:00000010
    // | 为'与'操作: 10101110
    int8[p++] = (arr2 << 4) | (arr3 >> 2);
    int8[p++] = (arr3 << 6) | arr4;
  }
  return int8;
}

base64 转成 Blob

// base64图片转blob
function base64toBlob(base64) {
  var arr = base64.split(','),
    mime = arr[0].match(/:(.*?);/)[1] || 'image/png',
    bstr = atob(arr[1]), // 将base64转为Unicode规则编码
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n); // 转换编码后才可以使用charCodeAt 找到Unicode编码
  }
  return new Blob([u8arr], { type: mime });
}

/* 优化版 */
function base64ToBlob(base64) {
  var arr = base64.split(',');
  var mime = arr[0].match(/:(.*?);/)[1] || 'image/png';
  // 去掉url的头,并转化为byte
  var bytes = window.atob(arr[1]);
  // 处理异常,将ascii码小于0的转换为大于0
  var ab = new ArrayBuffer(bytes.length);
  // 生成视图(直接针对内存):8位无符号整数,长度1个字节
  var u8arr = new Uint8Array(ab);

  for (var i = 0; i < bytes.length; i++) {
    u8arr[i] = bytes.charCodeAt(i);
  }

  return new Blob([u8arr], { type: mime });
}

以上就是深入浅出JavaScript中base64编码原理的详细内容,更多关于JavaScript base64编码的资料请关注脚本之家其它相关文章!

相关文章

  • 详解如何在JavaScript中使用装饰器

    详解如何在JavaScript中使用装饰器

    Decorator装饰器是ES7的时候提案的特性,目前处于Stage 3候选阶段(2022年10月)。装饰器简单来说就是修改类和类方法的语法糖,很多面向对象语言都有装饰器这一特性。本文就来说说如何在JavaScript中使用装饰器,需要的可以参考一下
    2022-10-10
  • Windows下支持自动更新的Electron应用脚手架的方法

    Windows下支持自动更新的Electron应用脚手架的方法

    这篇文章主要介绍了Windows下支持自动更新的Electron应用脚手架的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • JavaScript实现滚动加载更多

    JavaScript实现滚动加载更多

    这篇文章主要为大家详细介绍了JavaScript实现滚动加载更多,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • IE11下使用canvas.toDataURL报SecurityError错误的解决方法

    IE11下使用canvas.toDataURL报SecurityError错误的解决方法

    这篇文章主要给大家介绍了关于在IE11下使用canvas.toDataURL报SecurityError错误的解决方法,文中通过示例代码介绍的非常详细,对同样遇到这个问题的朋友们具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • 详解Javascript中prototype属性(推荐)

    详解Javascript中prototype属性(推荐)

    这篇文章主要介绍了Javascript中prototype属性的相关资料,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • 微信小程序使用modal组件弹出对话框功能示例

    微信小程序使用modal组件弹出对话框功能示例

    这篇文章主要介绍了微信小程序使用modal组件弹出对话框功能,结合实例形式分析了微信小程序model组件相关属性及事件响应操作技巧,需要的朋友可以参考下
    2017-11-11
  • javascript中节点的最近的相关节点访问方法

    javascript中节点的最近的相关节点访问方法

    parentNode——父节点;firstChild——第一个子节点;lastChild——最后一个子节点;previousSibling——紧挨着的前面的兄弟节点;这样就可以作短途旅行,访问当前节点的某些相关节点,感兴趣的你可以参考下哈
    2013-03-03
  • JavaScript鼠标移动事件以及实战案例

    JavaScript鼠标移动事件以及实战案例

    在学习JS中我对鼠标移动事件进行了一些总结,需要的可以作参考,下面这篇文章主要给大家介绍了关于JavaScript鼠标移动事件以及实战案例的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • JavaScript实用工具库lodash 使用

    JavaScript实用工具库lodash 使用

    Lodash是一个JavaScript的实用工具库,提供了很多常用的函数和工具,可以帮助我们更方便地操作数据和处理逻辑,这篇文章主要介绍了lodash 使用,需要的朋友可以参考下
    2024-04-04
  • js中AppendChild与insertBefore的用法详细解析

    js中AppendChild与insertBefore的用法详细解析

    这篇文章主要是对js中AppendChild与insertBefore的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12

最新评论