Question

我正在尝试在Electron的窗口上使用capturePage，当窗口不可见时，因为它完全被其他窗口遮挡，它会转储一个空的PNG。

我在创建窗口时尝试单独传递这些选项，但它们没有区别：

 useContentSize: true,
 enableLargerThanScreen: true
 webPreferences: {
   offscreen: true
   webgl: false
 }

任何想法如何使其发挥作用？

Answer 1

以下代码适用于隐藏，屏幕外和可见的浏览器窗口，即使它们被其他窗口覆盖

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

app.on('ready', () => {
  let win = new BrowserWindow({
    show: false // or true
  })
  win.webContents.on('did-stop-loading', () => {
    win.capturePage((image) => {
      fs.writeFile('test.png', image.toPNG(), (err) => {
        if (err) throw err
        console.log('It\'s saved!')
        app.quit()
      })
    })
  })
  win.loadURL('http://github.com')
})

如果您使用此代码收到空的PNG，则表示浏览器窗口尚未准备好进行捕获。也可能是你的情况！

capturePage似乎在旧版电子版本中遗漏了创建图像中的某些网页视图（在1.8.4中体验过）

Answer 2

首先 @perergy 回答有效，谢谢他。

我想分享一些变化 (electron@11.2.3) 和一些技巧：

如果你不想在 root BrowserWindow 中使用这个方法，而是在你的应用程序中的某个地方你将无法使用 new BrowserWindow()，你应该在 root 中添加 enableRemoteModule: true BrowserWindow，并在应用程序中所需的位置使用 new remote.BrowserWindow()；
我更喜欢使用 dom-ready 事件而不是 did-stop-loading，此时页面已加载但烦人的小部件尚未加载；
我不确定 win.capturePage 是否有效，建议使用 win.webContents.capturePage()

如何在窗口不可见时使capturePage工作？

2 个答案: