Saltar al contenido principal

Representación fuera de la pantalla

Descripción general​

Offscreen rendering te permite obtener el contenido de un BrowserWindow en un bitmap, así puede renderizarlo en cualquier lugar, por ejemplo, en una textura de una escena 3D. 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.
  • Un offscreen window siempre es creado como Frameless Window..

Modos de renderizado​

GPU acelerado​

La renderización acelerada por GPU significa que la GPU se usa para la composición. Por eso, el frame ha de ser copiado desde la GPU lo cual requiere mas recursos, por lo tanto este modo es mas lento que el dispositivo de salida de Software. The benefit of this mode is that WebGL and 3D CSS animations are supported.

Dispositivo de salida de software​

Este modo usa un dispositivo de salida por Software para renderizar en la CPU, asi que la generación del frame es mucho más rápida. Como resultado, este modo es preferido sobre el GPU acelerado.

Para habilitar este modo, la aceleración de la GPU ha de ser deshabilitada llamando a la API app.disableHardwareAcceleration().

Ejemplo​

docs/fiddles/features/offscreen-rendering (30.0.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.