在Electron中将元素/标签导出为PNG

Question

是否可以将Electron中的标签/元素导出到PNG文件？如何？

在我的特定情况下，我尝试使用webview，因此，它不是一个简单的案例，因为它可能包含任何内容。

Answer 1

您可以使用capturePage API截取webContents的一部分。因此，要捕获一个孤立的DOM元素，您必须获取它的维度，然后将其传递给capturePage，然后使用NativeImage API将其保存为PNG

const { x: left, y: top, width, height } = document.querySelector('my-element').getBoundingClientRect();

webContents.capturePage({x, y, width, height}, (image) => {
  //image is a NativeImage instance.  
  const buff = image.toPNG();
  //now you can save it to disk or do whatever
})

您也可以在webview中执行此操作。只需在预加载脚本中运行它，并使用IPC与外部父渲染器进程通信。