深入理解JavaScript中的Base64编码字符串

什么是Base64编码字符串？

Base64编码是一种将二进制数据转换为可打印ASCII字符的编码方式，其常用于在网络上传输数据，例如将图片或音频文件转换为Base64编码字符串，然后将其作为字符串传输。

Base64编码将每3个字节转换为4个ASCII字符，字节不足时会进行填充。Base64编码表中包含64个字符，其中包含大小写字母、数字和加号“+”、斜杠“/”，并使用“=”进行填充。

在JavaScript中，可以使用内置函数btoa和atob进行Base64编码和解码，同时也可以使用第三方库进行Base64编码和解码。

如何进行Base64编码字符串？

在JavaScript中进行Base64编码可以使用内置函数btoa，其使用方法为：先将需要编码的内容转换为UTF-8格式的字符串，然后将字符串传入btoa函数中，如下所示：

const str = "hello world";
const base64Str = btoa(unescape(encodeURIComponent(str)));
console.log(base64Str); // 输出：aGVsbG8gd29ybGQ=

在上述示例中，首先将需要编码的内容"hello world"转换为UTF-8编码的字符串"\x68\x65\x6C\x6C\x6F\x20\x77\x6F\x72\x6C\x64"，然后将其作为参数传入btoa函数中进行Base64编码，得到了Base64编码字符串"aGVsbG8gd29ybGQ="。

如何进行Base64解码？

在JavaScript中进行Base64解码可以使用内置函数atob，其使用方法为：将需要解码的Base64编码字符串传入atob函数中，然后再将解码的结果进行转换，如下所示：

const base64Str = "aGVsbG8gd29ybGQ=";
const str = decodeURIComponent(escape(atob(base64Str)));
console.log(str); // 输出：hello world

在上述示例中，首先将需要解码的Base64编码字符串"aGVsbG8gd29ybGQ="传入atob函数中进行解码，得到二进制数据。然后再将解码结果进行转换为UTF-8编码的字符串"hello world"。

示例1：将图片转换为Base64编码字符串

以下示例将演示如何将本地图片转换为Base64编码字符串：

const reader = new FileReader();
const fileInput = document.getElementById("fileInput");
const img = document.getElementById("img");

reader.onload = function () {
  const base64Str = reader.result.replace(/^data:image\/(png|jpg|gif);base64,/, "");
  img.src = reader.result;
  console.log(base64Str);
};

fileInput.onchange = function () {
  const file = fileInput.files[0];
  reader.readAsDataURL(file);
};

在上述示例中，首先通过FileReader对象读取本地图片文件，在reader.onload回调函数中将图片的Base64编码字符串存储到base64Str变量中，并将其打印输出，同时将图片显示在页面中。在fileInput.onchange事件处理函数中，读取fileInput元素中选择的文件并进行解码操作。

示例2：将Blob对象转换为Base64编码字符串

以下示例将演示如何将Blob对象转换为Base64编码字符串：

const xhr = new XMLHttpRequest();
const url = "https://cdn.example.com/image.png";

xhr.onload = function () {
  const blob = xhr.response;
  const reader = new FileReader();

  reader.onload = function () {
    const base64Str = reader.result.split(",")[1];
    console.log(base64Str);
  };

  reader.readAsDataURL(blob);
};

xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.send();

在上述示例中，首先通过XMLHttpRequest对象获取需要转换的二进制数据，然后通过FileReader对象将二进制数据转换为Base64编码字符串，并将其打印输出。