May 25, 2021 Electron
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);
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.
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
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:
xxxTemplate.png
[email protected]
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
.
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.