Saltar al contenido principal

Representación fuera de la pantalla

Descripción general​

Offscreen rendering lets you obtain the content of a BrowserWindow in a bitmap or a shared GPU texture, so it can be rendered anywhere, for example, on texture in a 3D scene. El offscreen rendering en Electron utiliza un enfoque similar al del proyecto Chromium Embedded Framework.

Notas:

  • Hay dos modos de rendering que puede ser usados (vea la sección de abajo) y solo la área sucia se pasa al evento paint para ser más eficiente.
  • Usted puede parar/continuar el renderizado así como también ajustar la velocidad de frame.
  • La tasa máxima de fotograma es 240 porque valores mayores solo traen pérdidas de rendimiento sin beneficios.
  • Cuando nada esta sucediendo en un pagina web, no se generan frames.
  • An offscreen window is always created as a Frameless Window.

Modos de renderizado​

GPU acelerado​

La renderización acelerada por GPU significa que la GPU se usa para la composición. The benefit of this mode is that WebGL and 3D CSS animations are supported. There are two different approaches depending on the webPreferences.offscreen.useSharedTexture setting.

  1. Use GPU shared texture

    Used when webPreferences.offscreen.useSharedTexture is set to true.

    This is an advanced feature requiring a native node module to work with your own code. The frames are directly copied in GPU textures, thus this mode is very fast because there's no CPU-GPU memory copies overhead, and you can directly import the shared texture to your own rendering program.

  2. Use CPU shared memory bitmap

    Used when webPreferences.offscreen.useSharedTexture is set to false (default behavior).

    The texture is accessible using the NativeImage API at the cost of performance. The frame has to be copied from the GPU to the CPU bitmap which requires more system resources, thus this mode is slower than the Software output device mode. But it supports GPU related functionalities.

Dispositivo de salida de software​

This mode uses a software output device for rendering in the CPU, so the frame generation is faster than shared memory bitmap GPU accelerated mode.

To enable this mode, GPU acceleration has to be disabled by calling the app.disableHardwareAcceleration() API.

Ejemplo​

docs/fiddles/features/offscreen-rendering (33.2.1)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()
  }
})

After launching the Electron application, navigate to your application's working folder, where you'll find the rendered image.