Base64 编码 ⇌ 二进制图片

base64 格式的图片转换为二进制格式

可以使用 atob() 和 TextEncoder 对象将 base64 格式的图片转换为二进制格式。

示例代码如下：

javascript
// 图片数据
const b64String = "data:image/png;base64,iVBORw0KGg... ";
// 去除 data uri 开头部分
const b64Image = b64String.split(',')[1];
// 将 base64 编码解码并返回二进制格式数据
const binaryData = atob(b64Image);
// 使用 TextEncoder 对象将二进制字符串编码成 Uint8Array 类型的数组缓冲区对象
const encoder = new TextEncoder();
const uint8Array = encoder.encode(binaryData);
// 创建 Blob 对象
const blob = new Blob([uint8Array]);
// 生成 URL
const imageUrl = URL.createObjectURL(blob);

最终得到的 imageUrl 代表了从 base64 编码转换而成的图像文件

二进制转 Base64

使用 Canvas API 和 FileReader API

获取到目标img标签，然后创建一个Canvas元素，并获取到其2D上下文。接着，设置Canvas的尺寸与图片尺寸一致，并使用drawImage方法将图片绘制到Canvas上。最后，使用toDataURL方法将Canvas上的图片转换为base64格式的字符串。

javascript
// 获取img标签
const img = document.querySelector('img');
// 创建一个Canvas元素
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// 设置Canvas的尺寸与图片尺寸一致
canvas.width = img.width;
canvas.height = img.height;
// 在Canvas上绘制图片
context.drawImage(img, 0, 0, img.width, img.height);
// 将Canvas上的图片转换为base64格式
const base64 = canvas.toDataURL('image/png');
// 输出转换后的base64字符串
console.log(base64);

请注意，由于浏览器的安全策略，如果图片不在同一个域下，可能会出现跨域问题。在处理跨域图片时，需要确保服务器端允许跨域访问或使用代理服务器进行转发。

使用 FileReader

获取到目标img标签，然后创建XMLHttpRequest对象，并设置其响应类型为blob。接着，发送GET请求获取图片数据。当请求完成时，创建FileReader对象，并使用其readAsDataURL方法读取blob数据。最后，在读取完成时，获取转换后的base64字符串并进行输出。

javascript
// 获取img标签
const img = document.querySelector('img');
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 设置响应类型为blob
xhr.responseType = 'blob';
// 发送GET请求获取图片数据
xhr.open('GET', img.src);
xhr.send();
// 监听请求完成事件
xhr.onload = function() {
  if (xhr.status === 200) {
    // 创建FileReader对象
    const reader = new FileReader();
    // 读取blob数据
    reader.readAsDataURL(xhr.response);
    // 监听读取完成事件
    reader.onloadend = function() {
      // 获取转换后的base64字符串
      const base64 = reader.result;
      // 输出转换后的base64字符串
      console.log(base64);
    };
  }
};

注意，由于浏览器的安全策略，如果图片不在同一个域下，可能会出现跨域问题。在处理跨域图片时，需要确保服务器端允许跨域访问或使用代理服务器进行转发。