深入浅出JavaScript中base64编码原理

什么是base64编码

Base64是一种用于将二进制数据转换成ASCII字符的编码方式。它使用64个字符表示64个不同的二进制数字，每个字符表示6个二进制位，因此每3个字节需要进行编码，得到4个字符。这种编码方式常用于电子邮件和HTTP协议传输数据，因为它可以处理非文本数据。

base64编码原理

在JavaScript中，将字符串转换为base64编码有两个核心方法：btoa()和atob()。btoa()方法用于将二进制数据编码为ASCII字符串，atob()方法用于将ASCII字符串解码为二进制数据。

btoa()方法

该方法接受一个字符串作为参数，返回一个base64编码的字符串。下面是一个简单的示例：

const originStr = "Hello, World!"; // 原始字符串

const base64Str = btoa(originStr); // 编码后的base64字符串

console.log(base64Str); // 输出：SGVsbG8sIFdvcmxkIQ==

在上面的示例中，我们将原始字符串“Hello, World!”通过btoa()方法进行编码，得到了编码后的字符串“SGVsbG8sIFdvcmxkIQ==”。

atob()方法

该方法接受一个base64编码的字符串作为参数，返回一个解码后的二进制数据。下面是一个简单的示例：

const base64Str = "SGVsbG8sIFdvcmxkIQ=="; // base64字符串

const originStr = atob(base64Str); // 解码后的原始字符串

console.log(originStr); // 输出：Hello, World!

在上面的示例中，我们将编码后的字符串“SGVsbG8sIFdvcmxkIQ==”通过atob()方法进行解码，得到了原始字符串“Hello, World!”。

使用案例

案例一：将图片转换为base64编码

将图片转换为base64编码可以在网页上直接显示图片，而不需要额外的请求。下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>将图片转换为base64编码</title>
  </head>
  <body>
    <img
      src="https://picsum.photos/id/100/500/300"
      alt="一张图片"
      id="img1"
    />

    <script>
      const imgElem = document.getElementById("img1"); // 获取img元素

      const imgSrc = imgElem.src; // 获取图片路径

      const imgBase64 = await getImageBase64(imgSrc); // 获取图片的base64编码

      console.log(imgBase64); // 输出图片的base64编码

      // 获取图片的base64编码
      function getImageBase64(imgSrc) {
        return new Promise((resolve, reject) => {
          const img = new Image();

          img.setAttribute("crossOrigin", "Anonymous"); // 设置图片跨域

          img.onload = function() {
            const canvas = document.createElement("canvas");

            canvas.width = img.width;
            canvas.height = img.height;

            const ctx = canvas.getContext("2d");

            ctx.drawImage(img, 0, 0, img.width, img.height);

            const dataURL = canvas.toDataURL("image/png");

            resolve(dataURL);

            canvas = null;
          };

          img.src = imgSrc;
        });
      }
    </script>
  </body>
</html>

在上面的示例中，我们使用getImageBase64()函数获取图片的base64编码，并将其输出到控制台中。

案例二：使用base64编码传输二进制数据

在客户端和服务器之间传输二进制数据时，可以将二进制数据进行base64编码，然后通过HTTP协议传输，这样可以避免二进制数据被破坏。

以下是一个简单的示例：

// 客户端发送数据
const data = new Uint8Array([1, 2, 3, 4, 5]); // Uint8Array类型的二进制数据

const base64Data = btoa(String.fromCharCode(...data)); // 将二进制数据转换为base64编码

fetch('/upload', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    data: base64Data
  })
});

// 服务器接收数据
router.post('/upload', async (ctx) => {
  const { data } = JSON.parse(ctx.request.body);

  const binaryData = atob(data).split('').map((char) => char.charCodeAt(0)); // 将base64编码的字符串解码为二进制数据

  const arrayBuffer = new Uint8Array(binaryData).buffer; // ArrayBuffer类型的二进制数据

  // 处理二进制数据

  ctx.body = 'success';
});

在上面的示例中，我们将客户端发送的二进制数据通过base64编码方式进行传输，并在服务器端解码，得到原始的二进制数据。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：深入浅出JavaScript中base64编码原理 - Python技术站