跳转到主内容

离屏渲染

概览​

离屏渲染允许你以位图或共享 GPU 纹理的形式获取一个 BrowserWindow 的内容，这样它就能在任意位置渲染，比如在一个 3D 场景内的纹理上。 Electron中的离屏渲染使用与 Chromium Embedded Framework 项目类似的方法。

注意：

  • 有两种渲染模式可以使用（见下），只有未渲染区域传递到 绘图 事件才能提高效率。
  • 您可以停止/继续渲染并设置帧速率。
  • 当 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 加速。

示例​

docs/fiddles/features/offscreen-rendering (41.0.0)Open in Fiddle
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应用后，进入你的应用的工作目录，你会在里面找到渲染的图片。