Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

Electron NativeImage module


May 25, 2021 Electron


Table of contents


In Electron, for all apis that create images, you can use file paths or nativeImage If null used, an empty image object is created.

For example, when you create a tray or set an icon for a window, you can use a string of picture paths:

var appIcon = new Tray('/Users/somebody/images/icon.png');
var window = new BrowserWindow({icon: '/Users/somebody/images/window.png'});

Or read the picture from the clipboard, which returns nativeImage :

var image = clipboard.readImage();
var appIcon = new Tray(image);

The supported format

PNG and PNG JPEG supported. PNG because it supports transparent and lossless compression.

In Windows, you can also use the format of the ICO icon.

High-resolution pictures

If the platform supports high-DPI, you can add @2x behind @2x base path and identify it as a high-resolution picture.

For example, icon.png a normal picture and has a standard [email protected] will be treated as a high-resolution picture and it will have double the DPI density.

If you want to support displaying pictures of different resolutions at the same time, you can put pictures with different sizes under the same folder without the DPI suffix. For example:

images/
├── icon.png
├── [email protected]
└── [email protected]
var appIcon = new Tray('/Users/somebody/images/icon.png');

These DPI suffixes are also supported:

  • @1x
  • @1.25x
  • @1.33x
  • @1.4x
  • @1.5x
  • @1.8x
  • @2x
  • @2.5x
  • @3x
  • @4x
  • @5x

Template picture

The template picture consists of black and clear (and an alpha channel). Template pictures are not used alone, but are often mixed with other content to create the desired end result.

The most common force is to use the template picture on the menu bar picture, so it can adapt to the bright, black different menu bar at the same time.

Note: Template pictures are only available on OS X.

In order to identify a picture as a template picture, its file name should end Template For example:

Method

nativeImage class has the following methods:

nativeImage.createEmpty()

Create an empty nativeImage instance.

nativeImage.createFromPath(path)

  • path String

Create a new nativeImage instance from the specified path .

nativeImage.createFromBuffer(buffer[, scaleFactor])

  • buffer Buffer
  • scaleFactor Double (optional)

Create buffer new nativeImage buffer scaleFactor is 1.0.

nativeImage.createFromDataURL(dataURL)

  • dataURL String

Create a new nativeImage instance nativeImage dataURL .

The instance method

nativeImage the following methods:

const nativeImage = require('electron').nativeImage;

var image = nativeImage.createFromPath('/Users/somebody/images/icon.png');

image.toPng()

Returns a Buffer that contains PNG encoding PNG the picture.

image.toJpeg(quality)

  • quality Integer ( must ) - between 0 and 100.

Returns a Buffer which contains JPEG encoded JPEG the picture.

image.toDataURL()

Returns the URL of the picture data.

image.getNativeHandle() OS X

Returns a Buffer with a c pointer saved to potentially process the original image. In OS X, an instance of the NSImage be returned.

Note that the returned pointer is a weak pointer to the underlying original image, not a copy, and you must ensure nativeImage is uninterrupted .

image.isEmpty()

Return a boolean that identifies if the picture is empty.

image.getSize()

Return the size of the picture.

image.setTemplateImage(option)

  • option Boolean

Identify the picture as a template picture.

image.isTemplateImage()

Return a boolean that identifies whether the picture is a template picture.