Как делать скриншоты в ElectronJS?

Опубликовано: 1 Августа, 2021

ElectronJS - это платформа с открытым исходным кодом, используемая для создания кроссплатформенных нативных настольных приложений с использованием веб-технологий, таких как HTML, CSS и JavaScript, которые могут работать в операционных системах Windows , macOS и Linux. Он объединяет движок Chromium и NodeJS в единую среду выполнения.

Electron поддерживает создание файлов PDF и печать файлов с веб-страницы в настольных приложениях. Наряду с этими функциями, Electron также предоставляет способ, с помощью которого мы можем делать снимки экрана веб-страницы и сохранять их в виде файла изображения в собственной системе, используя методы экземпляра объекта BrowserWindow и свойство webContents. Electron внутренне обрабатывает изображения с помощью класса NativeImage, поэтому нам также требуются методы Instance модуля nativeImage для преобразования соответствующего NativeImage в формат PNG или JPEG , прежде чем они могут быть сохранены в собственной системе. Для сохранения файлов в собственной системе мы будем использовать методы экземпляра диалогового модуля в Electron. В этом руководстве будет показано, как делать снимки экрана веб-страницы в Electron и сохранять их в собственной системе.

Мы предполагаем, что вы знакомы с предварительными условиями, описанными в вышеупомянутой ссылке. Для работы Electron в системе должны быть предварительно установлены node и npm.

Пример: следуйте инструкциям, приведенным в разделе «Создание PDF в ElectronJS», чтобы настроить базовое приложение Electron. Скопируйте код Boilerplate для файлов main.js и index.html, как указано в статье. Также внесите необходимые изменения, упомянутые в файле package.json, чтобы запустить приложение Electron. Мы продолжим создавать наше приложение, используя ту же кодовую базу. Основные шаги, необходимые для настройки приложения Electron, остаются прежними.

package.json:

{
  "имя": "электрон-скриншот",
  "версия": "1.0.0",
  "description": "Скриншот в электронном",
  "main": "main.js",
  "scripts": {
    "старт": "электрон".
  },
  "ключевые слова": [
    "электрон"
  ],
  «автор»: «Радхеш Ханна»,
  "лицензия": "ISC",
  "dependencies": {
    "электрон": "^ 8.3.0"
  }
}

Создайте папку с активами в соответствии со структурой проекта. Мы будем использовать папку с ресурсами в качестве пути по умолчанию для хранения снимков экрана, сделанных приложением.
Вывод: На этом этапе настроено наше основное электронное приложение. После запуска приложения мы должны увидеть следующий результат.

Скриншот в Electron: BrowserWindow Instance, webContents Свойство и диалог модуль является частью основного процесса. Чтобы импортировать и использовать объект BrowserWindow и диалоговый модуль в процессе визуализации , мы будем использовать удаленный модуль Electron.

index.html : добавьте в этот файл следующий фрагмент. Кнопка « Сделать снимок экрана» еще не имеет связанных с ней функций. Чтобы изменить это, добавьте следующий код в файл index.js.

html

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

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) просто делает снимок экрана веб-страницы, заданной объектом прямоугольника. Отсутствие прямоугольного объекта захватит всю видимую веб-страницу, то есть весь видимый экземпляр BrowserWindow. Он принимает следующие параметры.

rectangle: Object (Необязательно) Объект прямоугольника . Он состоит из следующих параметров, которые необходимы для определения прямоугольника и его положения на веб-странице / экране.
- x: Integer Координата X начала прямоугольника. В этом случае координата X представляет собой координату веб-страницы / экрана, которую необходимо захватить.
- y: Integer Координата Y начала прямоугольника. В этом случае координата Y представляет собой координату веб-страницы / экрана, которую нужно захватить.
- width: Integer Ширина прямоугольника. В этом случае он представляет собой ширину веб-страницы / экрана, которую нужно захватить.
- height: Integer Высота прямоугольника. В этом случае он представляет собой высоту веб-страницы / экрана, которую нужно захватить.

Метод экземпляра win.webContents.capturePage () возвращает Promise и разрешается с экземпляром NativeImage при успешном создании снимка экрана. Нам нужно преобразовать этот экземпляр NativeImage в JPEG или PNG, используя методы экземпляра модуля nativeImage, прежде чем его можно будет сохранить в собственной системе.

image.toPNG (options) Этот метод экземпляра преобразует экземпляр NativeImage в формат PNG , возвращая буфер NodeJS, содержащий данные изображения в кодировке PNG. Мы будем использовать буфер, возвращаемый этим методом, для записи изображения в файл .png, как показано в коде с использованием модуля fs. Кодировка по умолчанию для файла PNG будет base64 . Он принимает следующие параметры.
- options: Object (Необязательно) Объект options состоит из одного параметра, то есть scaleFactor: Double (Необязательно), представляющего коэффициент масштабирования (масштабирование) изображения. По умолчанию принято значение 1.0 .
image.toJPEG (качество) Этот метод экземпляра преобразует экземпляр NativeImage в формат JPEG , возвращая буфер NodeJS, содержащий данные изображения в кодировке JPEG. Мы будем использовать буфер, возвращаемый этим методом, для записи изображения в файл .jpeg, как показано в коде с использованием модуля fs. Кодировка по умолчанию для файла JPEG будет base64 . Он принимает следующие параметры.
- quality: Integer Это значение не может быть пустым. Может принимать значение от 0 до 100 . Это значение представляет собой коэффициент качества изображения, где 0 - самое низкое качество, а 100 - самое высокое качество изображения.

Метод экземпляра dialog.showSaveDialog (options) модуля диалогового окна используется для взаимодействия с собственной файловой системой, чтобы открыть диалоговое окно системы для сохранения файлов на локальном компьютере путем выборки пути к файлу, указанного пользователем. По умолчанию мы указываем путь к папке с ресурсами и сохраняем файл изображения в формате PNG с именем image.png . Дополнительные сведения о том, как ограничить пользователя форматами PNG / JPEG и свойствах метода dialog.showSaveDialog () , см. В разделе «Сохранение файлов в ElectronJS».
Чтобы получить текущий экземпляр BrowserWindow в процессе рендеринга, мы можем использовать некоторые статические методы, предоставляемые объектом BrowserWindow.

BrowserWindow.getAllWindows (): этот метод возвращает массив активных / открытых экземпляров BrowserWindow. В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться из массива, как показано в коде.
BrowserWindow.getFocusedWindow (): этот метод возвращает экземпляр BrowserWindow, который сфокусирован в приложении. Если текущий экземпляр BrowserWindow не найден, возвращается значение null . В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться с помощью этого метода, как показано в коде.

Выход:

Node.js JavaScript HTML CSS

Как делать скриншоты в ElectronJS?

html

javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ