Electron / Angular 保存 desktopCapturer 抓取的图像

Question

我有一些代码可以截取屏幕截图并将其存储在变量中。

代码如下：

takeScreenshot() {
    desktopCapturer.getSources({ types: ['screen'], thumbnailSize: { width: 800, height: 600 })
    .then( (sources: { thumbnail: { toDataURL: () => any; }; }[]) => {
      
      const theimage = sources[0].thumbnail.toDataURL(); // Thumbnail size image


    })
}

我现在想将此屏幕截图保存到我的计算机中。

我试过了：

fs.writeFile('myimage.png', this.theimage, function(err: any) {
        if (err) {
            console.error('Failed to save ' + err);
        } else {
            console.log('Saved: ' + 'myimage.png');
        }
    });

但它创建的文件不会作为图像打开。

如何将此捕获保存为图像？

Answer 1

您可以在主文件中使用contents.capturePage([dimensions])。如果您不提供尺寸参数，它将捕获整个窗口。这将返回一个带有原生图像的承诺，您可以使用fs.writeFile 创建一个新的图像文件。

样本

const {
  app,
  BrowserWindow
} = require('electron');
const fs = require('fs');

const initWindow = () => {
  const window = new BrowserWindow({
    width: 800,
    height: 600,
  });

  window.loadFile('index.html');
  return window;
}

app.once('ready', async () => {
  const window = initWindow();
  const image = await window.webContents.capturePage();
  fs.writeFile('image.png', image.toPNG());
});