离屏渲染¶

概述¶

离屏渲染允许你以位图或共享 GPU 纹理的形式获取 BrowserWindow 的内容，从而可以在任意位置渲染，例如在 3D 场景的纹理上。 Electron 中的离屏渲染采用了与 Chromium Embedded Framework 项目类似的方法。

说明:

• 可以使用两种渲染模式（见下文），并且只会将脏区域传递给 paint 事件，以提高效率。
• 你可以停止/继续渲染，也可以设置帧率。
• 当 webPreferences.offscreen.useSharedTexture 为 false 时，最大帧率为 240，因为更大的值只会带来性能 损失而没有好处。
• 当网页上没有任何活动时，不会生成帧。
• 离屏窗口始终作为 无边框窗口 创建。

渲染模式¶

GPU 加速¶

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

1. 使用 GPU 共享纹理

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

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

2. 使用 CPU 共享内存位图

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

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

软件输出设备¶

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

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

示例¶

```fiddle docs/fiddles/features/offscreen-rendering 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 应用程序后，导航到应用程序的 工作文件夹，在那里你会找到渲染后的图像。