Electron升级后截图报错：Function must be called on an object of type NativeImage

问题根源 #

你当前代码里的webview变量是React虚拟DOM节点，不是Electron实际的webview实例，导致capturePage()返回的对象上下文异常，触发Illegal invocation错误。

解决思路 #

1. 获取真实的webview DOM元素 #

通过React的useRef获取渲染后的真实webview节点，而非直接使用JSX变量：

import { useRef, useState } from 'react';

export default function WebViewComponent() {
  const webviewRef = useRef(null);

  const handleCapture = async () => {
    if (!webviewRef.current) return;
    try {
      const rawImage = await webviewRef.current.capturePage();
      const pngData = rawImage.toPNG();
      // 处理截图数据
    } catch (err) {
      console.error('截图失败:', err);
    }
  };

  return (
    <>
      <webview
        ref={webviewRef}
        src="path"
        className="webview__3kBDE"
        style={{ width: '768px', height: '576px', margin: '0 auto' }}
      />
      <button onClick={handleCapture}>截图</button>
    </>
  );
}

2. 确保webview加载完成后再截图 #

新版本Electron对webview的生命周期要求更严格，建议在did-finish-load事件触发后执行截图：

import { useRef, useEffect } from 'react';

export default function WebViewComponent() {
  const webviewRef = useRef(null);

  useEffect(() => {
    const webview = webviewRef.current;
    if (!webview) return;

    const onPageLoaded = async () => {
      // 页面加载完成后执行截图
      const rawImage = await webview.capturePage();
      const pngData = rawImage.toPNG();
      // 处理数据
    };

    webview.addEventListener('did-finish-load', onPageLoaded);
    return () => webview.removeEventListener('did-finish-load', onPageLoaded);
  }, []);

  return (
    <webview
      ref={webviewRef}
      src="path"
      className="webview__3kBDE"
      style={{ width: '768px', height: '576px', margin: '0 auto' }}
    />
  );
}

3. 切换到主进程处理截图（上下文隔离场景） #

如果启用了上下文隔离，渲染进程可能无法正确访问NativeImage的方法，可将截图逻辑移到主进程：

• 主进程代码：

const { ipcMain, webContents } = require('electron');

ipcMain.handle('capture-webview-screenshot', async (_, webContentsId) => {
  const targetWebContents = webContents.fromId(webContentsId);
  if (!targetWebContents) throw new Error('找不到目标webContents');
  
  const image = await targetWebContents.capturePage();
  return image.toPNG();
});

• 渲染进程（React）代码：

import { useRef } from 'react';

export default function WebViewComponent() {
  const webviewRef = useRef(null);

  const handleCapture = async () => {
    if (!webviewRef.current) return;
    try {
      const webContentsId = webviewRef.current.getWebContentsId();
      const pngData = await window.electron.ipcRenderer.invoke('capture-webview-screenshot', webContentsId);
      // 处理截图数据
    } catch (err) {
      console.error('截图失败:', err);
    }
  };

  return (
    <>
      <webview
        ref={webviewRef}
        src="path"
        className="webview__3kBDE"
        style={{ width: '768px', height: '576px', margin: '0 auto' }}
      />
      <button onClick={handleCapture}>截图</button>
    </>
  );
}

4. 检查BrowserWindow配置 #

确保webview相关权限已开启：

const { BrowserWindow } = require('electron');
const path = require('path');

new BrowserWindow({
  webPreferences: {
    webviewTag: true, // 必须开启才能使用webview标签
    contextIsolation: true,
    preload: path.join(__dirname, 'preload.js') // 用于暴露ipcRenderer等API到渲染进程
  }
});

preload.js示例（暴露ipcRenderer）：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electron', {
  ipcRenderer: {
    invoke: ipcRenderer.invoke
  }
});

内容的提问来源于stack exchange，提问作者Nileshsinh Rathod