メインコンテンツへ飛ぶ

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

概要​

オフスクリーンレンダリングでは BrowserWindow のコンテンツを ビットマップで取得できます。これは、3D シーンのテクスチャのようにどこにでも描画できます。 Electron のオフスクリーンレンダリングは Chromium 埋め込みフレームワーク プロジェクトと似たアプローチを使用しています。

注意:

  • レンダリングモードは 2 種類使用でき (後述)、変化した部分だけを paint イベントに渡すことでより効率的なレンダリングができます。
  • 描画を停止/続行したり、フレームレートを設定したりできます。
  • 最大フレームレートは 240 です。より大きな値にしてもメリットはなく、性能を損うだけです。
  • ウェブページに何も起きなければ、フレームは生成されません。
  • オフスクリーンウインドウは、常に フレームレスウインドウ として作成されます。

レンダリングモード​

GPU アクセラレーション​

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

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

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

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

サンプル​

docs/fiddles/features/offscreen-rendering (30.0.1)Open in 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 アプリケーションを起動したら、アプリケーションを開いたフォルダを見てみましょう。描画された画像があるはずです。