13. Electron.js – Основы. Electron API – shell, nativeImage

30 января, 2019 в 1:05

Категория: Electron.js / JavaScript

В этот раз рассмотрим еще два объекта 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.

Теги :