Учебник по Electron.js

Работа с изображениями

При добавлении значков мы можем указать путь до изображения в формате PNG, JPEG или ICO:

icon: 'test.ico'

либо объект класса NativeImage:

icon: nativeImage.createFromPath(path.join(__dirname, 'test.ico'))

Чтобы воспользоваться вторым способом нужно предварительно импортировать объект nativeImage с помощью следующей инструкции:

const { nativeImage } = require('electron');

Создание объекта изображения

Создать объект изображения позволяют следующие методы объекта nativeImage:

let img1 = nativeImage.createEmpty();
console.log( img1.getSize() ); // { width: 0, height: 0 }
let img2 = nativeImage.createFromPath('test.png');
console.log( img2.getSize() ); // { width: 400, height: 300 }
let data1 = img2.toBitmap();
let img5 = nativeImage.createFromBitmap(data1, {
   width: 400, height: 300, scaleFactor: 1.0
});
console.log( img5.getSize() ); // { width: 400, height: 300 }
let data2 = img2.toPNG();
let img6 = nativeImage.createFromBuffer(data2, {
   width: 400, height: 300, scaleFactor: 1.0
});
console.log( img6.getSize() ); // { width: 400, height: 300 }
let data3 = img2.toDataURL();
let img7 = nativeImage.createFromDataURL(data3);
console.log( img7.getSize() ); // { width: 400, height: 300 }

Получение размеров изображения

Получить объект с размерами изображения позволяет метод getSize([<scaleFactor>]):

let img3 = nativeImage.createFromPath('photo.jpg');
console.log( img3.getSize() ); // { width: 500, height: 333 }

Метод isEmpty() возвращает значение true, если изображение пустое, и false — в противном случае:

console.log( img1.isEmpty() ); // true
console.log( img2.isEmpty() ); // false

Преобразование объекта в различные форматы

Преобразовать объект изображения в различные форматы позволяют следующие методы:

let data4 = img2.toPNG();
try {
   fs.writeFileSync('dataPNG.png', data4, {encoding: null});
} catch (e) {
   console.log(e);
}
let data5 = img3.toJPEG(100);
try {
   fs.writeFileSync('dataJPEG.jpg', data5, {encoding: null});
} catch (e) {
   console.log(e);
}
console.log(img2.toBitmap());
// <Buffer 00 80 00 ff 00 80 00 ff ... 479950 more bytes>
console.log(img2.getBitmap());
// <Buffer 00 80 00 ff 00 80 00 ff ... 479950 more bytes>
console.log(img2.toDataURL());
// data:image/png;base64,iVBORw0KGgoAAAANSUhE...

Обрезка изображения

Обрезать изображение позволяет метод crop(<Объект>). В качестве параметра указывается объект со свойствами x, y, width и height, описывающий обрезаемую область. Метод возвращает объект NativeImage. Пример:

let img8 = img3.crop({x: 200, y: 50, width: 300, height: 300});
try {
   fs.writeFileSync('dataPNG2.png', img8.toPNG(), {encoding: null});
} catch (e) {
   console.log(e);
}

Изменение размеров изображения

Изменить размеры изображения позволяет метод resize(<Опции>). В качестве параметра указывается объект со свойствами width (ширина), height (высота) и quality (качество). Если указана только ширина или только высота, то второй параметр рассчитывается с соблюдением соотношения сторон. В свойстве quality можно указать значения good, better или best (значение по умолчанию) в виде строки. Метод возвращает объект NativeImage. Пример:

let img9 = img3.resize({width: 250, quality: 'best'});
try {
   fs.writeFileSync('dataPNG3.png', img9.toPNG(), {encoding: null});
} catch (e) {
   console.log(e);
}