Electron 離屏渲染

離線渲染允許您在位圖中獲取瀏覽器窗口的內(nèi)容，因此可以在任何地方渲染，例如在3D場(chǎng)景中的紋理。Electron中的離屏渲染使用與 Chromium Embedded Framework 項(xiàng)目類似的方法。

可以使用兩種渲染模式，并且只有臟區(qū)通過 'paint' 事件才能更高效。渲染可以停止、繼續(xù)，并且可以設(shè)置幀速率。 指定的幀速率是上限值，當(dāng)網(wǎng)頁(yè)上沒有發(fā)生任何事件時(shí)，不會(huì)生成任何幀。 最大幀速率是60，因?yàn)樵俑邲]有好處，而且損失性能。

注意: 屏幕窗口始終創(chuàng)建為 Frameless Window.

兩種渲染模式

GPU加速

GPU加速渲染意味著使用GPU用于合成。因?yàn)閹仨殢男枰嘈阅艿腉PU中復(fù)制，因此這種模式比另一個(gè)模式慢得多。這種模式的優(yōu)點(diǎn)是支持WebGL和3D CSS動(dòng)畫。

軟件輸出設(shè)備

此模式使用軟件輸出設(shè)備在CPU中渲染，因此幀生成速度更快，因此此模式優(yōu)先于GPU加速模式。

要啟用此模式，必須通過調(diào)用 app.disableHardwareAcceleration() API 來禁用GPU加速。

使用

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)
})