¿Cómo tomar capturas de pantalla en ElectronJS?

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows , macOS y Linux . Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.

Electron admite la generación de archivos PDF y la impresión de archivos desde la página web en aplicaciones de escritorio. Junto con estas características, Electron también proporciona una forma en la que podemos tomar capturas de pantalla de la página web y guardarlas como un archivo de imagen en el sistema nativo utilizando los métodos de instancia del objeto BrowserWindow y la propiedad webContents . Electron maneja imágenes internamente usando la clase NativeImage , por lo tanto, también requerimos los métodos Instance del módulo nativeImage para convertir la NativeImage respectiva en PNG o JPEG .formato antes de que puedan guardarse en el sistema nativo. Para guardar los archivos en el sistema nativo, utilizaremos los métodos de instancia del módulo de diálogo en Electron. Este tutorial demostrará cómo tomar capturas de pantalla de la página web en Electron y guardarlas en el sistema nativo.

Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.

Ejemplo: Siga los pasos dados en Generar PDF en ElectronJS para configurar la aplicación electrónica básica. Copie el código estándar para el archivo main.js y el archivo index.html como se indica en el artículo. Realice también los cambios necesarios mencionados para el archivo package.json para iniciar la aplicación Electron. Continuaremos construyendo nuestra aplicación usando la misma base de código. Los pasos básicos necesarios para configurar la aplicación Electron siguen siendo los mismos. 
 

paquete.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"
  }
}

Cree la carpeta de activos según la estructura del proyecto. Usaremos la carpeta de activos como la ruta predeterminada para almacenar las imágenes de captura de pantalla tomadas por la aplicación. 
Salida: en este punto, nuestra aplicación electrónica básica está configurada. Al iniciar la aplicación, deberíamos ver el siguiente resultado. 

Captura de pantalla en Electron: la instancia de BrowserWindow , la propiedad webContents y el módulo de diálogo son parte del proceso principal . Para importar y usar el objeto BrowserWindow y el módulo de diálogo en el proceso Renderer , usaremos el módulo remoto Electron . 

index.html : agregue el siguiente fragmento en ese archivo. El botón Tomar captura de pantalla aún no tiene ninguna funcionalidad asociada. Para cambiar esto, agregue el siguiente código en el archivo index.js .

<h3>Screenshot of Page in Electron</h3>
<button id="screenshot">
  Take Screenshot
</button>

index.js : agregue el siguiente fragmento en ese archivo. 

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

Explicación: El método de instancia win.webContents.capturePage(rectangle) simplemente captura la captura de pantalla de la página web especificada por el objeto de rectángulo . Omitir el objeto rectángulo capturará toda la página web visible, es decir, toda la Instancia visible de la ventana del navegador . Toma los siguientes parámetros. 

• rectángulo: Objeto (Opcional) El objeto rectángulo . Consta de los siguientes parámetros que se requieren para definir un rectángulo y su posición en la página web/pantalla. 
  • x: Entero La coordenada X del origen del rectángulo. En este caso, la coordenada X representa la coordenada de la página web/pantalla a capturar.
  • y: Entero La coordenada Y del origen del rectángulo. En este caso, la coordenada Y representa la coordenada de la página web/pantalla a capturar.
  • ancho: Entero El ancho del rectángulo. En este caso, representa el ancho de la página web/pantalla a capturar.
  • altura: Entero La altura del rectángulo. En este caso, representa la altura de la página web/pantalla a capturar.

El método de instancia win.webContents.capturePage() devuelve una Promesa y se resuelve con una instancia de NativeImage en una captura de pantalla exitosa. Necesitamos convertir esta Instancia de NativeImage a JPEG o PNG usando los métodos de Instancia del módulo nativeImage antes de que pueda guardarse en el Sistema nativo. 

• image.toPNG(opciones) Este método de instancia convierte la instancia de NativeImage a formato PNG devolviendo un búfer de NodeJS que contiene los datos codificados en PNG de la imagen. Usaremos el búfer devuelto por este método para escribir la imagen en un archivo .png como se muestra en el código usando el módulo fs . La codificación predeterminada del archivo PNG será base64 . Toma los siguientes parámetros. 
  • opciones: Objeto (Opcional) El objeto de opciones consta de un solo parámetro, es decir, el scaleFactor: Double (Opcional) que representa el factor de escala (zoom) de la Imagen. Por defecto, el valor tomado es 1.0 .
• image.toJPEG(calidad) Este método de instancia convierte la instancia de NativeImage a formato JPEG al devolver un búfer de NodeJS que contiene los datos codificados en JPEG de la imagen. Usaremos el búfer devuelto por este método para escribir la imagen en un archivo .jpeg como se muestra en el código usando el módulo fs . La codificación predeterminada del archivo JPEG será base64 . Toma los siguientes parámetros.
  • calidad: Entero Este valor no puede estar vacío. Puede tomar un valor entre 0 y 100 . Este valor representa el factor de calidad de la imagen, siendo 0 la calidad más baja y 100 la imagen de calidad más alta.

El método de instancia dialog.showSaveDialog(options) del módulo de diálogo se utiliza para interactuar con el sistema de archivos nativo para abrir un cuadro de diálogo del sistema para guardar archivos en local obteniendo la ruta del archivo especificada por el usuario. De forma predeterminada, estamos especificando la ruta del archivo a la carpeta de activos y guardando el archivo de imagen en formato PNG con el nombre de image.png . Para obtener más información sobre cómo restringir al usuario a los formatos PNG/JPEG y las propiedades del método dialog.showSaveDialog() , consulte Guardar archivos en ElectronJS .
Para obtener la instancia actual de BrowserWindow en el proceso Renderer , podemos usar algunos de losMétodos estáticos proporcionados por el objeto BrowserWindow . 

• BrowserWindow.getAllWindows(): este método devuelve una array de instancias de BrowserWindow activas/abiertas. En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede consultar directamente desde el arreglo, como se muestra en el código.
• BrowserWindow.getFocusedWindow(): este método devuelve la instancia de BrowserWindow que está enfocada en la aplicación. Si no se encuentra ninguna instancia de BrowserWindow actual, devuelve nulo . En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia directamente mediante este método, como se muestra en el código. 
   

Producción: