原生js base64转字符串

在原生JavaScript中，可以使用`atob()`函数将Base64编码的字符串转换为普通字符串，使用`btoa()`函数将普通字符串转换为Base64编码的字符串。

1. Base64转字符串：

function base64ToString(base64) {
  return decodeURIComponent(escape(atob(base64)));
}

var base64String = "SGVsbG8gd29ybGQh";
var result = base64ToString(base64String);
console.log(result); // 输出：Hello world!

2. 字符串转Base64：

function stringToBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

var str = "Hello world!";
var result = stringToBase64(str);
console.log(result); // 输出：SGVsbG8gd29ybGQh

相关问题

在后端代码中，将图片以字节流的形式返回给前端。前端通过 axios请求获取到字节流，并将其转换为 Base64 编码的字符串。然后，想办法显示在前端网页上，写出代码案例

当后端以字节流的形式返回图片数据时，前端可以通过 Axios 请求获取字节流，并将其转换 Base64 编码的字符串。然后，可以使用该字符串作为图片的源来在前端网页上显示。以下是一个示例代码：

// 发送 AJAX 请求获取图片字节流
axios({
  url: '/image/imageName', // 替换为你的后端接口地址，其中 'imageName' 是图片的名称
  method: 'GET',
  responseType: 'arraybuffer',
})
  .then(response => {
    // 将字节流转换为 Base64 编码的字符串
    const base64Image = btoa(
      new Uint8Array(response.data).reduce(
        (data, byte) => data + String.fromCharCode(byte),
        ''
      )
    );

    // 在前端网页上显示图片
    const imgElement = document.getElementById('image');
    imgElement.src = 'data:image/png;base64,' + base64Image;
  })
  .catch(error => {
    console.error('请求图片失败:', error);
  });

在上述代码中，通过 Axios 发送 GET 请求获取图片字节流，并设置 `responseType` 为 `arraybuffer`，以便获取字节流数据。然后，将字节流转换为 Base64 编码的字符串，并将该字符串作为图片的源来显示。

在 HTML 中，需要有一个具有对应 id 的 `<img>` 元素来显示图片：

<img id="image" alt="图片">

请确保将 `/image/imageName` 替换为你的后端接口地址，并将 `'imageName'` 替换为真实的图片名称。另外，请根据实际情况调整图片类型（例如，将 `'image/png'` 替换为 `'image/jpeg'`）和图片格式（例如，将 `'png'` 替换为 `'jpg'`）。

以上代码示例使用了 Axios 库来发送 AJAX 请求，如果你没有使用 Axios，可以使用其他类似的 AJAX 库或原生的 `XMLHttpRequest` 对象来发送请求。

前端base64转jepg格式

前端将Base64编码的数据转换为JPEG格式通常涉及到两步操作：解码Base64字符串并将其保存为二进制数据，然后将这个二进制数据转换成实际的JPEG图片。

1. 解码Base64：首先，你需要使用JavaScript的`atob()`函数将Base64字符串转换回原始的字节串。例如：

let base64String = "your_base64_string";
let decodedData = atob(base64String);

2. 转换为Blob：然后，将解码后的字节串创建为一个Blob对象，这是浏览器原生支持的一种表示二进制数据的结构：

let blob = new Blob([decodedData], {type: 'image/jpeg'});

3. 写入到文件或显示：你可以选择直接下载这个Blob，或者通过URL.createObjectURL()方法生成一个临时URL来显示图片：

// 下载图片
let url = URL.createObjectURL(blob);
let aLink = document.createElement('a');
aLink.href = url;
aLink.download = 'output.jpg';
aLink.click();

// 或者显示在一个img标签内
let imgElement = document.createElement('img');
imgElement.src = url;
document.body.appendChild(imgElement);

请注意，以上步骤可能会有跨域限制，如果需要在不同源之间转换，可能需要服务器配合处理。