Question

我试过BrowserWindow.capturePage，但此功能仅截取可见页面的屏幕截图。我尝试谷歌，但没有找到如何在Electron应用程序中截取完整网页的截图？

Answer 1

我从electron doc知道，webContents.capturePage只返回可见区域的截图，附加，如果网页的尺寸大于屏幕，结果会错过溢出的内容

【解决方案】

1.找一个节点模块将DOM转Image

<块引用>

建议html-to-image

2.加载到目标网页

<块引用>

通过preload

  // mainProcess
  const testWin = new BrowserWindow({
    ...
    webPreferences: {
      preload: path.join(__dirname, '../preload.js'),
    },
    ...
  });

  // preload.js
  const htmlToImage = require('html-to-image');

  if (window) {
    window.htmlToImage = htmlToImage;
  }

3.准备执行JS内容

// captureWebPageJS
(() => {
  return new Promise((resolve, reject) => {
    try {
      if (window.htmlToImage) {
        const htmlToImage = window.htmlToImage;
        const $body = document.querySelectorAll('body')[0];

        htmlToImage.toJpeg($body).then(resolve).catch(reject);
      } else {
        reject(new Error('no htmlToImage module found!'));
      }
    } catch (err) {
      reject(err);
    }
  });
})();

4.将 DOM 转换为图像并自动打开

const previewImgUrl = path.join(__dirname, 'preview-capture-image.jpg');
const imgUrlViaBase64 = await testWin.webContents.executeJavaScript(captureWebPageJS, true);

fs.writeFileSync(previewImgUrl, String(imgUrlViaBase64).replace(/^data:image\/\w+;base64,/, ''), {
  encoding: 'base64',
});
// { shell } = require('electron');
shell.openPath(previewImgUrl);

好了，一切都搞定了！

Answer 2

我使用了这个库[https://www.npmjs.com/package/screenshot-desktop] 这非常有效，当您调用bufer数组返回的lib方法时，可以将文件保存到临时目录中，并获得指向屏幕截图的绝对链接。这是一件事-当您调用屏幕截图方法时，它将屏幕截图本身带到剪贴板中

如何在Electron应用程序中截取完整网页的截图？

2 个答案: