如何用Node.js将Base64格式的PNG图片数据保存为本地文件？

你的问题核心是Base64数据不完整或者处理方式有疏漏，导致生成的图片只显示一半。以下是完整的解决方案：

问题排查点 #

1. 是否完整提取了Base64数据？原img src包含data:image/png;base64,前缀，必须去掉后再转换
2. Base64字符串是否被截断？大文件的Base64数据很长，复制或传输时容易丢失部分内容
3. Base64字符串长度是否符合规范？Base64要求长度是4的倍数，不足需要补=填充

正确实现代码 #

基础完整版本（异步写入，适合大文件） #

const fs = require('fs').promises;

// 你的完整img src
const imageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABd4AAAH ....';

// 1. 移除Base64前缀，提取纯数据
const pureBase64 = imageSrc.replace(/^data:image\/png;base64,/, '');

// 2. 补全Base64长度到4的倍数（避免编码错误）
const paddedBase64 = pureBase64.padEnd(
  pureBase64.length + (4 - pureBase64.length % 4) % 4,
  '='
);

// 3. 转换为Buffer并异步写入文件
async function savePngImage() {
  try {
    const imageBuffer = Buffer.from(paddedBase64, 'base64');
    await fs.writeFile('./myImage.png', imageBuffer);
    console.log('图片保存完成');
  } catch (error) {
    console.error('保存失败:', error.message);
  }
}

savePngImage();

同步版本（小文件可用） #

如果你坚持用同步写入，确保Base64数据完整：

const fs = require('fs');

const imageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABd4AAAH ....';
const pureBase64 = imageSrc.replace(/^data:image\/png;base64,/, '');
const paddedBase64 = pureBase64.padEnd(
  pureBase64.length + (4 - pureBase64.length % 4) % 4,
  '='
);

const buff = Buffer.from(paddedBase64, 'base64');
fs.writeFileSync('./myImage.png', buff);

关键注意事项 #

• 确保获取到的Base64字符串是完整无截断的：如果是从前端或其他接口获取，检查传输过程中是否有大小限制，避免数据被截断
• 清理多余字符：如果Base64字符串里有换行、空格，先通过pureBase64.replace(/\s/g, '')移除

内容的提问来源于stack exchange，提问作者Javad-M