В этот раз рассмотрим еще два объекта Electron API – shell и nativeImage. Объект shell обеспечивает управление файлами и URL, используя стандартные приложения для их открытия. Модуль shell предоставляет функции, относящиеся к десктопной интеграции. Объект nativeImage необходим для работы с изображениями, обеспечивает их подключение и конвертацию в различные форматы.
shell
Пример открытия ссылки в стандартном браузере пользователя:
1 2 | const { shell } = require('electron') shell.openExternal('https://github.com') |
Пример создания области drag and prop для добавления и открытия файлов и области для их удаления
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <style media="screen"> .box { border: 5px dashed black; padding: 3rem 4rem; color: white; float: left; } #filebox { background-color: green; margin-right: 20px; } #trashbox { background-color: red; } </style> <div class="box" id="filebox"> Open File Here! </div> <div class="box" id="trashbox"> Delete File Here! </div> |
renderer.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | let myFile = null; const fileBox = document.getElementById('filebox'); const trashBox = document.getElementById('trashbox'); fileBox.ondragover = fileBox.ondragend = fileBox.ondragleave = trashBox.ondragover = trashBox.ondragend = trashBox.ondragleave = () => { return false; }; fileBox.ondrop = (event) => { console.log(event.dataTransfer.files) myFile = event.dataTransfer.files[0].path; shell.openItem(myFile) return false; } trashBox.ondrop = (event) => { console.log(event.dataTransfer.files) myFile = event.dataTransfer.files[0].path; shell.moveItemToTrash(myFile) return false; } |
nativeImage
Создает иконки приложения, в том числе для системного лотка (Windows), дока (macOS), используя файлы PNG и JPG.
1 2 3 4 | const { BrowserWindow, Tray } = require('electron') const appIcon = new Tray('/Users/somebody/images/icon.png') let win = new BrowserWindow({ icon: '/Users/somebody/images/window.png' }) console.log(appIcon, win) |
или
1 2 3 4 | const { clipboard, Tray } = require('electron') const image = clipboard.readImage() const appIcon = new Tray(image) console.log(appIcon) |
Добавление изображения на страницу в формате base64
1 2 3 4 5 6 7 8 9 | const { nativeImage } = require('electron') ; let logo = nativeImage.createFromPath('logo.png'); let logoSize = logo.getSize(); console.log(logo.getSize()); console.log(logo.toDataURL()); document.getElementById('logoImage') .src = logo.resize({width: logoSize.width/2 , height: logoSize.height/2 }).toDataURL() |
Конвертация файла png в afqk формата jpg используя возможности Node.js
1 2 3 4 5 6 7 8 | const fs = require('fs'); const { nativeImage } = require('electron') ; let logo = nativeImage.createFromPath('logo.png'); fs.writeFile('logo.jpg', logo.toJPEG(100), (err) => { if (err) throw err; console.log('The file has been saved!'); }); |
Методов и параметров значительно больше чем рассмотрено здесь, для поиска необходимого решения лучше всего обратиться к документации – shell и nativeImage.
Здесь можно более детально рассмотреть проект на GitHub с установленными настройкам и дополнениями – https://github.com/NetWorkRoom/electron-start/tree/shell.