跳到主要内容

离屏渲染

概述

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

注意:

  • 有两种渲染模式可以使用(见下节),并且只有脏区域会传递到 paint 事件,以提高效率。
  • 您可以停止/继续渲染以及设置帧速率。
  • webPreferences.offscreen.useSharedTexture 不为 true 时,最大帧速率为 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 加速。

示例

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 应用程序后,导航到您的应用程序的工作文件夹,您将在其中找到渲染的图像。