离屏渲染

概述

离屏渲染允许您获取 BrowserWindow 中的内容，以位图或共享 GPU 纹理的形式，因此它可以渲染在任何地方，例如，在 3D 场景中的纹理上。 Electron 中的离屏渲染使用与 Chromium Embedded Framework 项目类似的方法。

注意:

可以使用两种渲染模式（请参阅下面的部分），并且只有脏区域才会传递到 paint 事件，以提高效率。
您可以停止/继续渲染以及设置帧速率。
当 webPreferences.offscreen.useSharedTexture 不为 true 时，最大帧速率为 240，因为更大的值只会带来性能损失，而没有好处。
当网页上没有任何事情发生时，不会生成任何帧。
离屏窗口始终创建为无框架窗口。

渲染模式

GPU 加速

GPU 加速渲染意味着 GPU 用于合成。这种模式的优点是支持 WebGL 和 3D CSS 动画。根据 webPreferences.offscreen.useSharedTexture 设置，有两种不同的方法。

使用 GPU 共享纹理

当 webPreferences.offscreen.useSharedTexture 设置为 true 时使用。

这是一个高级功能，需要一个原生 node 模块才能与您自己的代码一起使用。帧直接复制到 GPU 纹理中，因此这种模式非常快，因为没有 CPU-GPU 内存复制开销，您可以直接将共享纹理导入到您自己的渲染程序中。您可以在此处阅读更多详细信息。
使用 CPU 共享内存位图

当 webPreferences.offscreen.useSharedTexture 设置为 false（默认行为）时使用。

可以使用 NativeImage API 访问纹理，但会牺牲性能。帧必须从 GPU 复制到 CPU 位图，这需要更多的系统资源，因此这种模式比软件输出设备模式慢。但它支持与 GPU 相关的功能。

软件输出设备

此模式使用软件输出设备在 CPU 中进行渲染，因此帧生成速度比共享内存位图 GPU 加速模式快。

要启用此模式，必须通过调用 app.disableHardwareAcceleration() API 禁用 GPU 加速。

示例

docs/fiddles/features/offscreen-rendering (37.1.0)在 Fiddle 中打开

main.js

const { app, BrowserWindow } = require('electron/main')
const fs = require('node:fs')
const path = require('node:path')

app.disableHardwareAcceleration()

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      offscreen: true
    }
  })

  win.loadURL('https://github.com')
  win.webContents.on('paint', (event, dirty, image) => {
    fs.writeFileSync('ex.png', image.toPNG())
  })
  win.webContents.setFrameRate(60)
  console.log(`The screenshot has been successfully saved to ${path.join(process.cwd(), 'ex.png')}`)
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

启动 Electron 应用程序后，导航到应用程序的工作文件夹，您将在其中找到渲染的图像。

概述​

渲染模式​

GPU 加速​

软件输出设备​

示例​

概述

渲染模式

GPU 加速

软件输出设备

示例