如何在 ElectronJS 中截取屏幕截图？

ElectronJS是一个开源框架，用于使用能够在 Windows 、 macOS和Linux操作系统上运行的 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台原生桌面应用程序。它将 Chromium 引擎和NodeJS 组合成一个单一的运行时。

Electron 支持从桌面应用程序的网页中生成 PDF 文件和打印文件。除了这些功能外，Electron 还提供了一种方法，我们可以使用 BrowserWindow对象的 Instance 方法和 webContents属性截取网页的屏幕截图并将其作为图像文件保存到本机系统上。 Electron 内部使用NativeImage类处理图像，因此我们还需要nativeImage模块的 Instance 方法将相应的NativeImage转换为PNG或JPEG格式，然后才能将它们保存到本机系统中。为了将文件保存到本机系统上，我们将使用 Electron 中对话模块的 Instance 方法。本教程将演示如何在 Electron 中截取网页的屏幕截图并将其保存到本机系统中。

我们假设您熟悉上述链接中介绍的先决条件。为了让 Electron 正常工作，需要在系统中预装node和npm。

示例：按照在 ElectronJS 中生成 PDF 中给出的步骤设置基本的 Electron 应用程序。复制文章中提供的main.js文件和index.html文件的样板代码。还要执行 package.json文件中提到的必要更改以启动电子应用程序。我们将继续使用相同的代码库构建我们的应用程序。设置 Electron 应用程序所需的基本步骤保持不变。

包.json：

{
  "name": "electron-screenshot",
  "version": "1.0.0",
  "description": "Screenshot in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

根据项目结构创建资产文件夹。我们将使用资产文件夹作为默认路径来存储应用程序拍摄的屏幕截图。
输出：此时，我们的基本电子应用程序已设置。启动应用程序后，我们应该会看到以下结果。

Electron 中的屏幕截图： BrowserWindow实例、 webContents属性和对话框模块是Main Process 的一部分。为了在Renderer Process 中导入和使用BrowserWindow对象和对话框模块，我们将使用 Electron远程模块。

index.html ：在该文件中添加以下代码段。 Take Screenshot 按钮还没有任何与之关联的功能。要更改此设置，请在index.js文件中添加以下代码。

html

Screenshot of Page in Electron

  Take Screenshot

index.js ：在该文件中添加以下代码段。

javascript

const electron = require("electron");
const BrowserWindow = electron.remote.BrowserWindow;
const path = require("path");
const fs = require("fs");
  
// Importing dialog module using remote
const dialog = electron.remote.dialog;
  
// let win = BrowserWindow.getAllWindows()[0];
let win = BrowserWindow.getFocusedWindow();
  
var screenshot = document.getElementById("screenshot");
screenshot.addEventListener("click", (event) => {
    win.webContents
        .capturePage({
            x: 0,
            y: 0,
            width: 800,
            height: 600,
        })
        .then((img) => {
            dialog
                .showSaveDialog({
                    title: "Select the File Path to save",
                
                    // Default path to assets folder
                    defaultPath: path.join(__dirname, 
                                           "../assets/image.png"),
                
                    // defaultPath: path.join(__dirname, 
                    // '../assets/image.jpeg'),
                    buttonLabel: "Save",
                
                    // Restricting the user to only Image Files.
                    filters: [
                        {
                            name: "Image Files",
                            extensions: ["png", "jpeg", "jpg"],
                        },
                    ],
                    properties: [],
                })
                .then((file) => {
                    // Stating whether dialog operation was 
                    // cancelled or not.
                    console.log(file.canceled);
                    if (!file.canceled) {
                        console.log(file.filePath.toString());
  
                        // Creating and Writing to the image.png file
                        // Can save the File as a jpeg file as well,
                        // by simply using img.toJPEG(100);
                        fs.writeFile(file.filePath.toString(), 
                                     img.toPNG(), "base64", function (err) {
                            if (err) throw err;
                            console.log("Saved!");
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        })
        .catch((err) => {
            console.log(err);
        });
});

说明： win.webContents.capturePage(rectangle) Instance 方法只是简单的抓取矩形对象指定的网页截图。省略矩形对象将捕获整个可见网页，即整个可见BrowserWindow实例。它接受以下参数。

• 矩形：对象(可选)矩形对象。它由以下参数组成，这些参数需要定义一个矩形及其在网页/屏幕上的位置。
  • x: Integer矩形原点的X 坐标。在这种情况下，X坐标表示要捕获的网页/屏幕的坐标。
  • y: Integer矩形原点的Y 坐标。在这种情况下，Y坐标表示要捕获的网页/屏幕的坐标。
  • width: Integer矩形的宽度。在这种情况下，它表示要捕获的网页/屏幕的宽度。
  • height: Integer矩形的高度。在这种情况下，它表示要捕获的网页/屏幕的高度。

win.webContents.capturePage() Instance 方法返回一个Promise并在成功捕获屏幕截图时使用 NativeImage 实例进行解析。我们需要使用 nativeImage模块的 Instance 方法将此 NativeImage实例转换为JPEG或PNG ，然后才能将其保存在本机系统上。

• image.toPNG(options)此实例方法通过返回包含图像的PNG编码数据的 NodeJS缓冲区，将 NativeImage 实例转换为 PNG 格式。我们将使用此方法返回的 Buffer 将图像写入.png文件，如使用fs模块的代码所示。 PNG 文件的默认编码为base64 。它接受以下参数。
  • options: Object(可选) options对象由一个参数组成，即scaleFactor: Double(可选)表示图像的比例因子(缩放)。默认情况下，采用的值为1.0 。
• image.toJPEG(quality)此 Instance 方法通过返回包含图像的JPEG编码数据的NodeJS 缓冲区，将 NativeImage实例转换为 JPEG 格式。我们将使用此方法返回的 Buffer 将图像写入.jpeg文件，如使用fs模块的代码所示。 JPEG 文件的默认编码为base64 。它接受以下参数。
  • quality: Integer此值不能为空。它可以采用0到100之间的值。该值表示图像的质量因子， 0为最低质量， 100为最高质量图像。

对话框模块的dialog.showSaveDialog(options)实例方法用于与本地文件系统交互以打开系统对话框，通过获取用户指定的文件路径将文件保存在本地。默认情况下，我们指定资产文件夹的文件路径并以 PNG格式保存图像文件，名称为image.png 。有关如何将用户限制为 PNG/JPEG 格式和dialog.showSaveDialog()方法属性的更多信息，请参阅在 ElectronJS 中保存文件。
要在Renderer Process 中获取当前BrowserWindow实例，我们可以使用BrowserWindow对象提供的一些静态方法。

• BrowserWindow.getAllWindows()：此方法返回活动/打开的 BrowserWindow 实例的数组。在这个应用程序中，我们只有一个活动的BrowserWindow实例，它可以直接从 Array 中引用，如代码所示。
• BrowserWindow.getFocusedWindow()：此方法返回在应用程序中聚焦的 BrowserWindow 实例。如果未找到当前 BrowserWindow 实例，则返回null 。在此应用程序中，我们只有一个活动的BrowserWindow实例，可以使用此方法直接引用它，如代码所示。

输出：