Electron off-screen rendering

Offline rendering allows you to get the contents of a browser window in a bitmap, so you can render anywhere, such as textures in a 3D scene. Off-screen rendering in Electron uses a similar approach to the Chromium Embedded Framework project.

You can use two rendering modes, and only dirty areas can be more efficient with 'paint' events. R endering can stop, continue, and frame rate can be set. T he specified frame rate is the upper limit and no frames are generated when no events occur on the Web page. The maximum frame rate is 60, because no higher is good and performance is lost.

Note: Screen windows are always created as Frameless Window .

Two rendering modes

GPU acceleration

GPU accelerated rendering means that GPU is used for composition. B ecause frames must be copied from GPUs that require more performance, this mode is much slower than the other mode. The advantage of this pattern is that it supports WebGL and 3D CSS animations.

The software output device

This mode uses a software output device to render in the CPU, so frame generation is faster, so this mode takes precedence over GPU acceleration mode.

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

Use

const {app, BrowserWindow} = require('electron')

app.disableHardwareAcceleration()

let win
app.once('ready', () => {
  win = new BrowserWindow({
    webPreferences: {
      offscreen: true
    }
  })
  win.loadURL('http://github.com')
  win.webContents.on('paint', (event, dirty, image) => {
    // updateBitmap(dirty, image.getBitmap())
  })
  win.webContents.setFrameRate(30)
})