JavaScript中关于base64的一些事
什么是Base64
Base64是一种将二进制数据编码成可打印ASCII字符的方式。它可以将常见的图片、音频、视频等二进制文件以文本方式存储，方便数据传输和存储。
Base64编码与解码
Base64编码
在JavaScript中，可以使用btoa()函数将文本或二进制数据转换为Base64编码。
const text = "Hello, world!";
const base64EncodedText = btoa(text);
console.log(base64EncodedText); // "SGVsbG8sIHdvcmxkIQ=="
更复杂一些的情况下，可以使用TextEncoder API将文本编码成Uint8Array数组，再将数组传递给btoa()函数进行编码。
const text = "Hello, 世界!";
const encoder = new TextEncoder();
const utf8Array = encoder.encode(text);
const base64EncodedText = btoa(String.fromCharCode.apply(null, utf8Array));
console.log(base64EncodedText); // "SGVsbG8sIOeahOW-pee8lA=="
Base64解码
同样，也可以使用JavaScript中的atob()函数将Base64编码的数据解码为文本或二进制数据。
const base64EncodedText = "SGVsbG8sIHdvcmxkIQ==";
const text = atob(base64EncodedText);
console.log(text); // "Hello, world!"
需要注意的是，使用atob()函数解码Base64编码的数据，如果数据包含了非法字符，会抛出一个异常。
const base64EncodedText = "SGVsbG8sIHdvcmxkIQ&="; // 非法字符"&"
try {
const text = atob(base64EncodedText);
console.log(text);
} catch (e) {
console.error(e.message); // "Invalid character: The string to be decoded is not correctly encoded."
}
Base64的应用
图片的Base64编码
对于一张图片，可以使用XMLHttpRequest对象的responseType属性设置为"blob"，然后通过FileReader对象读取图片数据，最后使用btoa()函数将二进制数据编码为Base64字符串。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image to Base64</title>
</head>
<body>
<input type="file" id="imageInput" accept="image/*">
<button onclick="convertImage()">Convert to Base64</button>
<div id="imagePreview"></div>
<script>
function convertImage() {
const imageInput = document.getElementById("imageInput");
const imagePreview = document.getElementById("imagePreview");
if (imageInput.files && imageInput.files[0]) {
const fileReader = new FileReader();
fileReader.onload = function() {
const image = new Image();
image.src = this.result;
image.onload = function() {
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext("2d");
context.drawImage(image, 0, 0);
const base64String = canvas.toDataURL();
imagePreview.innerHTML = `<img src="${base64String}">`;
};
};
fileReader.readAsDataURL(imageInput.files[0]);
}
}
</script>
</body>
</html>
文件的Base64编码
对于一个二进制文件，可以使用XMLHttpRequest对象的responseType属性设置为"arraybuffer"，然后将获取到的文件数据传递给btoa()函数进行Base64编码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File to Base64</title>
</head>
<body>
<input type="file" id="fileInput">
<button onclick="convertFile()">Convert to Base64</button>
<div id="filePreview"></div>
<script>
function convertFile() {
const fileInput = document.getElementById("fileInput");
const filePreview = document.getElementById("filePreview");
if (fileInput.files && fileInput.files[0]) {
const fileReader = new FileReader();
fileReader.onload = function() {
const base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(this.result)));
filePreview.innerHTML = `Base64: ${base64String}`;
};
fileReader.readAsArrayBuffer(fileInput.files[0]);
}
}
</script>
</body>
</html>
以上就是使用JavaScript进行Base64编解码的一些事情。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript中关于base64的一些事 - Python技术站
微信扫一扫 
支付宝扫一扫 