メインコンテンツにスキップ

オフスクリーンレンダリング

概要​

オフスクリーンレンダリングを使用すると、`BrowserWindow` のコンテンツをビットマップで取得できるため、たとえば 3D シーンのテクスチャなど、任意の場所にレンダリングできます。Electron のオフスクリーンレンダリングは、Chromium Embedded Framework プロジェクトと同様のアプローチを使用します。

注意事項:

  • 使用できるレンダリングモードは 2 つあり（以下のセクションを参照）、効率を高めるためにダーティ領域のみが `paint` イベントに渡されます。
  • レンダリングの停止/再開、およびフレームレートの設定ができます。
  • 最大フレームレートは 240 です。これ以上の値を設定してもメリットがなく、パフォーマンスの低下につながるためです。
  • Web ページで何も発生していない場合は、フレームは生成されません。
  • オフスクリーンウィンドウは常にフレームレスウィンドウとして作成されます。

レンダリングモード​

GPU アクセラレーション​

GPU アクセラレーションレンダリングとは、GPU を合成に使用することを意味します。そのため、フレームを GPU からコピーする必要があり、より多くのリソースが必要となるため、このモードはソフトウェア出力デバイスよりも低速です。このモードの利点は、WebGL と 3D CSS アニメーションがサポートされていることです。

ソフトウェア出力デバイス​

このモードは、CPU でのレンダリングにソフトウェア出力デバイスを使用するため、フレーム生成がはるかに高速です。そのため、このモードは GPU アクセラレーションモードよりも推奨されます。

このモードを有効にするには、`app.disableHardwareAcceleration()` API を呼び出して GPU アクセラレーションを無効にする必要があります。

例​

docs/fiddles/features/offscreen-rendering (33.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 アプリケーションを起動した後、アプリケーションの作業フォルダに移動すると、レンダリングされた画像があります。