Js实现Base64编码与解码

Js实现Base64编码与解码的完整攻略如下：

Base64编码与解码

Base64是一种用64种字符来表示二进制数据的编码方式。它常用于在URL、Cookie、网页传输等场合下，将原始数据转换为纯文本的形式来进行传输或存储。在JavaScript中，可以通过自带的atob和btoa函数来实现Base64的编解码。

Base64编码

在JavaScript中，使用btoa函数可以将字符串或二进制数据进行Base64编码，其用法如下：

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

在上面的代码中，我们将"Hello, world!"这个字符串进行Base64编码，并将结果打印到控制台上。可以看到，btoa函数返回的Base64编码后的字符串为"SGVsbG8sIHdvcmxkIQ=="。

Base64解码

在JavaScript中，使用atob函数可以将Base64编码的字符串进行解码，其用法如下：

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

在上面的代码中，我们将"SGVsbG8sIHdvcmxkIQ=="这个Base64编码过的字符串进行解码，并将结果打印到控制台上。可以看到，atob函数返回的解码后的字符串为"Hello, world!"。

示例

下面是一个将图片转换为Base64编码的示例：

// 获取图片文件
const fileInput = document.getElementById("fileInput");
const file = fileInput.files[0];

// 读取图片内容
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(event) {
  // 获取Base64编码的图片内容
  const base64Data = event.target.result;
  console.log(base64Data);
};

在这个示例中，我们通过FileReader对象的readAsDataURL方法将一个图片文件读取为Base64编码的字符串。最后将读取到的Base64编码打印到控制台上。

下面是一个将Base64编码的字符串转换为图片并展示在页面上的示例：

const base64Data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..."; // 省略部分内容
const img = document.createElement("img");
img.src = base64Data;
document.body.appendChild(img);

在这个示例中，我们将Base64编码的图片内容赋值给img元素的src属性，然后将img元素添加到页面上。这样就可以将Base64编码的图片展示在页面上了。

希望以上介绍能对您有所帮助。