跳到主要內容

離屏渲染

概觀​

離屏渲染讓您可以在點陣圖或共享 GPU 紋理中取得 BrowserWindow 的內容，以便將其渲染到任何地方，例如，3D 場景中的紋理。Electron 中的離屏渲染使用類似於 Chromium Embedded Framework 專案的方法。

注意事項:

  • 可以使用兩種渲染模式（請參閱以下章節），並且只有髒區域會傳遞到 paint 事件，以提高效率。
  • 您可以停止/繼續渲染以及設定幀率。
  • 當 webPreferences.offscreen.useSharedTexture 不是 true 時，最大幀率為 240，因為更高的值只會帶來效能損失，而沒有任何好處。
  • 當網頁上沒有任何事情發生時，不會產生任何幀。
  • 離屏視窗始終建立為無框架視窗。

渲染模式​

GPU 加速​

GPU 加速渲染表示 GPU 用於合成。此模式的優點是支援 WebGL 和 3D CSS 動畫。根據 webPreferences.offscreen.useSharedTexture 設定，有兩種不同的方法。

  1. 使用 GPU 共享紋理

    當 webPreferences.offscreen.useSharedTexture 設定為 true 時使用。

    這是一項進階功能，需要原生 Node 模組才能與您自己的程式碼搭配使用。幀會直接複製到 GPU 紋理中，因此此模式非常快速，因為沒有 CPU-GPU 記憶體複製的額外負擔，您可以直接將共享紋理匯入到您自己的渲染程式。

  2. 使用 CPU 共享記憶體點陣圖

    當 webPreferences.offscreen.useSharedTexture 設定為 false 時使用（預設行為）。

    紋理可以使用 NativeImage API 存取，但會犧牲效能。幀必須從 GPU 複製到 CPU 點陣圖，這需要更多系統資源，因此此模式比軟體輸出裝置模式慢。但它支援 GPU 相關功能。

軟體輸出裝置​

此模式使用軟體輸出裝置在 CPU 中進行渲染，因此幀生成速度比共享記憶體點陣圖 GPU 加速模式更快。

若要啟用此模式，必須透過呼叫 app.disableHardwareAcceleration() API 來停用 GPU 加速。

範例​

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

啟動 Electron 應用程式後，導航到您應用程式的工作資料夾，您將在其中找到渲染的圖像。