手把手教你用JS将base64图像转换为file文件

使用 JavaScript 将 Base64 编码的图片转换为 File 文件

在前端开发中，转换 Base64 编码的图片为 File 文件是一个常见的需求，比如上传图片到服务器或在本地保存图片。本篇文章将详细介绍如何使用 JavaScript 实现这一转换。

第一步：拆分 Base64 字符串

Base64 字符串由头部和主体组成。头部包含图像类型和大小等元数据，主体是图像的实际数据。使用 split() 方法，我们可以将字符串拆分为这两部分：

const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
const parts = base64String.split(',');

第二步：获取图像类型和后缀

从头部中提取图像类型和后缀对于创建 File 文件至关重要。使用 match() 方法，我们可以解析头部：

const header = parts[0];
const match = header.match(/data:(image\/[^;]+)/);
const imageType = match[1];
const extension = imageType.split('/')[1];

imageType 保存图像类型，如 "image/png"，而 extension 保存图像后缀，如 "png"。

第三步：解码主体

主体包含编码后的图像数据。使用 atob() 方法，我们可以解码主体：

const body = parts[1];
const binaryData = atob(body);

binaryData 包含解码后的二进制数据。

第四步：创建 Uint8Array

Uint8Array 是一种 JavaScript 数组，可存储二进制数据。使用 Uint8Array() 构造函数，我们可以将二进制数据转换为 Uint8Array：

const binaryArray = new Uint8Array(binaryData.length);
for (let i = 0; i < binaryData.length; i++) {
  binaryArray[i] = binaryData.charCodeAt(i);
}

第五步：创建 File 对象

最后，使用 File() 构造函数创建 File 对象。File() 构造函数需要二进制数据、文件名和文件类型作为参数：

const file = new File([binaryArray], `image.${extension}`, {
  type: imageType,
});

这样，file 就包含了一个 File 对象。

结语

掌握了使用 JavaScript 将 Base64 编码的图片转换为 File 文件，可以帮助你解决许多前端开发场景的问题。通过遵循本篇文章介绍的步骤，你可以轻松地完成转换。

常见问题解答

1. 为什么需要将 Base64 编码的图片转换为 File 文件？

转换 Base64 编码的图片为 File 文件的常见场景包括上传图片到服务器、在本地保存图片或在 DOM 中使用图片。

2. 如何处理非图像 Base64 数据？

本文只讨论图像 Base64 数据。如果你需要处理非图像数据，你需要根据数据类型使用不同的转换方法。

3. 有没有更简单的转换方式？

本文介绍的方法是一个通用的转换方式。对于某些特定场景，可能有更简单的转换方法。例如，如果你使用 React，可以使用 useDataURL() 钩子。

4. 转换会影响图像质量吗？

Base64 编码是一种无损编码，转换不会影响图像质量。

5. 如何在不同浏览器中实现转换？

本篇文章介绍的方法在所有现代浏览器中都适用，包括 Chrome、Firefox、Safari 和 Edge。