深入浅出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技术站
微信扫一扫 
支付宝扫一扫 