Как делать скриншоты в 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, и на него можно напрямую ссылаться с помощью этого метода, как показано в коде.

Выход:

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