📅 最后修改于: 2023-12-03 14:59:28.066000 🧑 作者: Mango
Base64 是一种常见的编码方式，它将任意的二进制数据转换为由64个不同字符组成的文本字符串。在 JavaScript 中，可以使用 btoa() 和 atob() 函数进行 Base64 编码和解码。Base64 编码通常用于在文本协议中传输二进制数据，例如在 HTTP 请求中传输图片。
以下是在 JavaScript 中使用 btoa() 函数对字符串进行 Base64 编码的示例：
const stringToEncode = 'Hello, World!';
const encodedString = btoa(stringToEncode);
console.log(encodedString);
输出结果：
SGVsbG8sIFdvcmxkIQ==
以下是在 JavaScript 中使用 atob() 函数对 Base64 编码的字符串进行解码的示例：
const encodedString = 'SGVsbG8sIFdvcmxkIQ==';
const decodedString = atob(encodedString);
console.log(decodedString);
输出结果：
Hello, World!
请注意，在某些情况下，解码 Base64 编码字符串可能会导致异常，特别是当解码的结果包含无效的 Unicode 字符时。
Base64 编码在实际开发中有广泛的应用场景，以下是一些常见的示例：
可以使用 JavaScript 在客户端将图片转换为 Base64 编码，从而实现在网页中显示图片而无需通过网络请求。以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Base64 图片示例</title>
</head>
<body>
<input type="file" id="imageInput">
<img id="previewImage">
<script>
document.getElementById('imageInput').addEventListener('change', function(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
const base64Image = e.target.result;
document.getElementById('previewImage').src = base64Image;
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>
当需要在网络上传输二进制数据时，通过将其转换为 Base64 编码的字符串，可以轻松地将其嵌入到文本协议中。例如，以下是使用 JavaScript 在 HTTP 请求中发送 Base64 编码图像数据的示例：
const image = document.getElementById('previewImage');
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
const imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;
const base64Image = btoa(String.fromCharCode.apply(null, imageData));
// 将 base64Image 发送到服务器...
Base64 编码是一种常见的二进制数据编码方式，在 JavaScript 中可以使用 btoa() 和 atob() 函数进行编码和解码。它在图像处理、数据传输等方面有广泛的应用。