Electron/Angular环境下如何将desktopCapturer捕获的截图保存为可正常打开的图片文件

嘿，我知道问题出在哪了！你直接存toDataURL()返回的内容当然打不开——因为那是个Base64编码的字符串，而fs.writeFile直接写入这个字符串的话，并不会自动解码成图片的二进制数据，所以生成的文件没法正常解析为图片。

修正步骤： #

1. 剥离Base64前缀：toDataURL()返回的格式是data:image/png;base64,xxxxxx，我们需要把前缀去掉，只保留后面的编码内容。
2. 转换为Buffer：将纯Base64编码内容转换成Node.js的Buffer对象，这才是文件系统能识别的二进制数据格式。
3. 写入文件：用fs.writeFile把Buffer写入本地，这样生成的就是可正常打开的图片了。

完整修正代码 #

首先确保你已经引入了必要的模块：

const fs = require('fs');
// 注意：如果是Electron渲染进程，需根据版本获取desktopCapturer
// Electron 14+ 开启contextIsolation时，要通过contextBridge从主进程暴露；关闭的话可以直接引入
const { desktopCapturer } = require('electron');

然后修改你的截图方法：

takeScreenshot() { 
  // 先修正你之前代码里漏写的闭合大括号
  desktopCapturer.getSources({ types: ['screen'], thumbnailSize: { width: 800, height: 600 } }) 
  .then( (sources) => { 
    const imageBase64 = sources[0].thumbnail.toDataURL(); 
    // 去掉Base64的前缀部分
    const base64PureData = imageBase64.replace(/^data:image\/png;base64,/, '');
    // 将Base64字符串转换为二进制Buffer
    const imageBuffer = Buffer.from(base64PureData, 'base64');
    // 写入本地文件
    fs.writeFile('myimage.png', imageBuffer, (err) => { 
      if (err) { 
        console.error('Failed to save:', err); 
      } else { 
        console.log('Saved successfully: myimage.png'); 
      } 
    });
  })
  // 别忘了捕获截图过程中的错误
  .catch(captureErr => {
    console.error('Failed to capture screenshot:', captureErr);
  });
}

额外注意事项 #

• 如果是在Electron渲染进程中使用，要注意**上下文隔离（contextIsolation）**的配置：
  • 若contextIsolation: true（Electron 12+默认开启），不能直接在渲染进程引入electron模块，需要通过主进程的ipcMain和渲染进程的ipcRenderer通信，把截图逻辑放在主进程执行。
  • 若暂时关闭contextIsolation: false，可以直接引入，但不推荐用于生产环境。
• 你的原代码里desktopCapturer.getSources的参数少了一个闭合大括号，已经在修正代码里补上了，这个小错误也会导致功能异常哦。

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