Aller au contenu principal

Rendu hors de l'écran

Vue d'ensemble​

Le rendu hors écran vous permet d’obtenir le contenu d’une BrowserWindow dans une bitmap, de sorte qu’il puisse être rendu n’importe où, par exemple, sur la texture d’une scène 3D. Le rendu hors écran d'Electron utilise une approche similaire à celle du projet Chromium Embedded Framework.

Notes :

  • Il y a deux modes de rendu qui peuvent être utilisés (voir la section ci-dessous) et seule la zone modifiée est concernée par l'événement paint pour plus d'efficacité.
  • Vous pouvez stopper/reprendre le rendu ainsi que définir la fréquence d'affichage de l’image.
  • Le taux de rafraîchissement maximal est de 240 car des valeurs plus élevées n'apportent que des pertes de performances sans avantage particulier.
  • Quand rien ne se passe sur une page Web, aucune image n'est générée.
  • Remarque : Une fenêtre hors-écran est toujours créée comme une Frameless Window..

Mode de rendu​

Accélération GPU​

Le rendu par l'acceleration GPU signifie que le GPU est utilisé pour la composition. A cause de cela, cette fenêtre doit être copiée depuis le GPU et cela nécessite plus de performances. Donc ce mode est légèrement plus lent que l'autre. L’avantage de ce mode est que WebGL et les animations CSS 3D sont prises en charge.

Périphérique d'affichage logiciel​

Ce mode utilise un périphérique d'affichage logiciel pour le rendu du CPU, donc la génération de l'image est beaucoup plus rapide. Par conséquent, ce mode est préférable au mode d'accélération GPU.

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

Exemple​

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

Après avoir lancé l'application Electron, accédez au dossier contenant votre application et vous y trouverez l'image du rendu.