解析原来浏览器原生支持JS Base64编码解码

当我们需要在前端对数据进行编码或解码时，可以使用JavaScript中的Base64方法。而浏览器也提供了原生支持Base64编码解码的方法，我们只需要使用浏览器提供的方法即可。

浏览器原生方法

浏览器原生方法包括 window.btoa() 和 window.atob()，分别用于编码和解码Base64数据。

编码方法：window.btoa()

将字符串或二进制数据编码为Base64数据。

let data = "Hello, world!";
let base64Data = window.btoa(data);
console.log(base64Data); // "SGVsbG8sIHdvcmxkIQ=="

解码方法：window.atob()

将Base64数据解码为原始字符串或二进制数据。

let base64Data = "SGVsbG8sIHdvcmxkIQ==";
let decodedData = window.atob(base64Data);
console.log(decodedData); // "Hello, world!"

需要注意的是，使用window.atob()解码Base64数据时，如果数据格式不正确会抛出异常。

实际应用示例

示例1：图片 Base64 编解码

在前端开发过程中，我们可能会使用 Base64 编码给图片加上水印、缩略图等效果。以下是一个简单的示例：

<!-- HTML -->
<img id="image" src="./example.png" />

<!-- JavaScript -->
const image = document.getElementById("image");
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;

const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

// 将画布转换为 Base64 数据
const base64Data = canvas.toDataURL();

// 将 Base64 数据放入 img 标签
image.src = base64Data;

示例2：WebSocket 数据传输中 Base64 编解码

在使用 WebSocket 进行数据传输时，为了避免在传输过程中出现特殊字符而导致的问题，可以使用 Base64 编码对数据进行处理。

以下是一个示例，演示如何在使用 WebSocket 进行数据传输时进行 Base64 编解码：

const socket = new WebSocket("wss://example.com/ws");

function sendMsg(msg) {
  // 将原始消息转换为 Base64 数据
  const base64Data = window.btoa(msg);
  socket.send(base64Data);
}

socket.onmessage = (event) => {
  const base64Data = event.data;
  // 将 Base64 数据解码为原始消息
  const msg = window.atob(base64Data);
  console.log("Received message:", msg);
};