JavaScript中如何将base64字符串转换为Blob（不使用已废弃atob）

直接使用现代标准Web API实现，不需要调用已被标记废弃的atob方法，返回的Blob可直接传入File构造函数使用。

推荐异步实现（兼容性最佳） #

利用原生fetch对Data URL的解析能力直接转Blob，兼容Chrome 42+、Firefox 39+、Safari 10.1+所有主流版本，无任何废弃API依赖：

/**
 * 带data前缀的图片Base64转Blob
 * @param {string} base64Data 完整Base64串，格式如 data:image/png;base64,xxxx
 * @returns {Promise<Blob>}
 */
async function base64ImageToBlob(base64Data) {
  const response = await fetch(base64Data);
  return response.blob();
}

如果持有的是不带前缀的纯Base64编码段，根据图片格式手动拼接前缀即可，比如jpg图片拼接data:image/jpeg;base64,、webp图片拼接data:image/webp;base64,。

转File使用示例 #

// 示例Base64为1x1红色png
const demoBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
const blob = await base64ImageToBlob(demoBase64);
// 传入File构造函数生成文件对象
const imageFile = new File([blob], "demo.png", {
  type: blob.type,
  lastModified: Date.now()
});

同步实现（面向现代浏览器） #

如果需要同步逻辑，可使用ES2024标准新增的Uint8Array.fromBase64方法，这是atob的官方标准替代，目前支持Chrome 113+、Firefox 120+、Safari 16.4+：

/**
 * 纯Base64段同步转Blob
 * @param {string} pureBase64 去掉data前缀的纯编码内容
 * @param {string} mimeType 图片MIME类型，如image/png
 * @returns {Blob}
 */
function base64ToBlobSync(pureBase64, mimeType) {
  const uint8Buffer = Uint8Array.fromBase64(pureBase64);
  return new Blob([uint8Buffer], { type: mimeType });
}

注意：不要使用网上流传的拼接charCodeAt遍历字符串的老实现，性能比上述两种方案差30%以上，且存在大编码串内存溢出风险。

内容的提问来源于stack exchange，提问作者aj soprano