Офскрин-рендеринг

Обзор​

Офскрин-рендеринг позволяет получить содержимое BrowserWindow в виде растрового изображения, чтобы его можно было отрисовать в любом месте, например, на текстуре в 3D-сцене. Офскрин-рендеринг в Electron использует подход, аналогичный проекту Chromium Embedded Framework.

Примечания:

• Существует два режима рендеринга (см. раздел ниже), и только повреждённая область передаётся в событие paint для повышения эффективности.
• Вы можете остановить/продолжить рендеринг, а также задать частоту кадров.
• Максимальная частота кадров составляет 240, так как более высокие значения приводят только к потерям производительности без каких-либо преимуществ.
• Если на веб-странице ничего не происходит, кадры не генерируются.
• Окно офскрин всегда создаётся как безрамочное окно.

Режимы рендеринга​

Ускоренный рендеринг с помощью GPU​

Ускоренный рендеринг с помощью GPU означает, что для композиции используется GPU. Из-за этого кадр должен быть скопирован с GPU, что требует больше ресурсов, поэтому этот режим медленнее, чем устройство вывода программного обеспечения. Преимущество этого режима заключается в том, что поддерживаются WebGL и 3D-анимации CSS.

Устройство вывода программного обеспечения​

Этот режим использует устройство вывода программного обеспечения для рендеринга в процессоре, поэтому генерация кадров намного быстрее. В результате этот режим предпочтительнее, чем ускоренный с помощью GPU.

Чтобы включить этот режим, необходимо отключить ускорение с помощью GPU, вызвав API app.disableHardwareAcceleration().

Пример​

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

После запуска приложения Electron перейдите в папку рабочего каталога вашего приложения, где вы найдёте отрисованное изображение.