Electron 離屏渲染

概覽

離屏渲染允許你以位圖的方式來(lái)獲取 BrowserWindow 中的內(nèi)容，所以它可以在任何地方被渲染，例如在3D場(chǎng)景中的紋理。 Electron中的離屏渲染使用與 Chromium Embedded Framework 項(xiàng)目類似的方法。

注意：

• 有兩種渲染模式可以使用（見(jiàn)下），只有未渲染區(qū)域傳遞到 繪圖 事件才能提高效率。
• 您可以停止/繼續(xù)渲染并設(shè)置幀速率。
• 最高幀速率為 240，因?yàn)楦叩闹抵粫?huì)帶來(lái)性能上的損失而沒(méi)有任何收益。
• 當(dāng)網(wǎng)頁(yè)上沒(méi)有發(fā)生任何情況時(shí)，不會(huì)生成幀。
• 屏幕窗口始終創(chuàng)建為 無(wú)邊框窗口..

渲染模式?

GPU加速?

GPU加速渲染意味著使用GPU用于合成。 這也就意味著幀必須從GPU拷貝過(guò)來(lái)，從而需求更多的資源，因此這會(huì)比軟件輸出設(shè)備更慢。 這種模式的優(yōu)點(diǎn)是支持WebGL和3D CSS動(dòng)畫(huà).

軟件輸出設(shè)備?

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

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

示例

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

app.disableHardwareAcceleration()

let win

app.whenReady().then(() => {
  win = new BrowserWindow({ 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.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

DOCS/FIDDLES/FEATURES/OFFSCREEN-RENDERING (22.0.3)

Open in Fiddle

在運(yùn)行Electron應(yīng)用后，進(jìn)入你的應(yīng)用的工作目錄，你會(huì)在里面找到渲染的圖片。