本地图像 | nativeImage
使用 PNG 或 JPG 文件创建托盘,底座和应用程序图标。
过程:主要,渲染器
在 Electron 中,对于拍摄图像的 API,您可以传递文件路径或NativeImage
实例。null
传递时将使用空图像。
例如,在创建托盘或设置窗口图标时,可以将图像文件路径传递为String
:
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)
或者从剪贴板读取图像,该图像返回NativeImage
:
const {clipboard, Tray} = require('electron')
const image = clipboard.readImage()
const appIcon = new Tray(image)
console.log(appIcon)
支持的格式
目前PNG
和JPEG
图像格式支持。PNG
因为它支持透明和无损压缩,因此推荐使用。
在 Windows 上,您还可以ICO
从文件路径加载图标。为了获得最佳视觉质量,建议在以下内容中至少包含以下尺寸:
- Small icon
- 16x16 (100% DPI scale)
- 20x20 (125% DPI scale)
- 24x24 (150% DPI scale)
- 32x32 (200% DPI scale)
- Large icon
- 32x32 (100% DPI scale)
- 40x40 (125% DPI scale)
- 48x48 (150% DPI scale)
- 64x64 (200% DPI scale)
- 256x256
检查本文中的大小要求部分(https://msdn.microsoft.com/en-us/library/windows/desktop/dn742485(v = vs.85%29.aspx)。
高分辨率图像
在具有高 DPI 支持的平台(如 Apple Retina 显示器)上,您可以@2x
在图像的基本文件名后追加标记以将其标记为高分辨率图像。
例如,如果icon.png
是具有标准分辨率的普通图像,icon@2x.png
则会被视为具有双 DPI 密度的高分辨率图像。
如果您希望同时支持具有不同DPI密度的显示器,则可以将不同大小的图像放在同一文件夹中,并使用不带DPI后缀的文件名。例如:
images/
├── icon.png
├── icon@2x.png
└── icon@3x.png
const {Tray} = require('electron')
let appIcon = new Tray('/Users/somebody/images/icon.png')
console.log(appIcon)
还支持以下 DPI 后缀:
@1x
@1.25x
@1.33x
@1.4x
@1.5x
@1.8x
@2x
@2.5x
@3x
@4x
@5x
模板图像
模板图像由黑色和清晰的颜色(和一个alpha通道)组成。模板图像不能用作独立图像,通常与其他内容混合以创建所需的最终外观。
最常见的情况是使用模板图像作为菜单栏图标,以适应明暗菜单栏。
注意:模板图像仅在 macOS 上受支持。
要将图像标记为模板图像,其文件名应以单词结尾Template
。例如:
xxxTemplate.png
xxxTemplate@2x.png
方法
nativeImage
模块具有以下方法,所有这些都会返回NativeImage
该类的一个实例:
nativeImage.createEmpty()
返回 NativeImage
创建一个空NativeImage
实例。
nativeImage.createFromPath(path)
path
串
返回 NativeImage
NativeImage
从位于的文件创建一个新实例path
。如果该方法path
不存在,不能被读取或者不是有效的图像,则此方法返回空图像。
const nativeImage = require('electron').nativeImage
let image = nativeImage.createFromPath('/Users/somebody/images/icon.png')
console.log(image)
nativeImage.createFromBuffer(buffer[, options])
buffer
缓冲options
对象(可选)width
整数(可选) - 位图缓冲区必需。height
整数(可选) - 位图缓冲区必需。scaleFactor
Double(可选) - 默认为1.0。
返回 NativeImage
NativeImage
从中创建一个新实例buffer
。
nativeImage.createFromDataURL(dataURL)
dataURL
串
返回 NativeImage
NativeImage
从中创建一个新实例dataURL
。
类:NativeImage
自然包装图像,如托盘,底座和应用程序图标。
过程:主要,渲染器
实例方法
以下方法可用于NativeImage
该类的实例:
image.toPNG([options])
options
对象(可选)scaleFactor
Double(可选) - 默认为1.0。
返回Buffer
- 包含图像编码数据的缓冲区PNG
。
image.toJPEG(quality)
quality
整数(必需) - 在0 - 100之间。
返回Buffer
- 包含图像编码数据的缓冲区JPEG
。
image.toBitmap([options])
options
对象(可选)scaleFactor
Double(可选) - 默认为1.0。
返回Buffer
- 包含图像原始位图像素数据副本的缓冲区。
image.toDataURL([options])
options
对象(可选)scaleFactor
Double(可选) - 默认为1.0。
返回String
- 图像的数据 URL。
image.getBitmap([options])
options
对象(可选)scaleFactor
Double(可选) - 默认为1.0。
返回Buffer
- 包含图像的原始位图像素数据的缓冲区。
差异化的getBitmap()
和toBitmap()
被,getBitmap()
不复制位图数据,所以你必须立即使用返回的缓冲区在当前事件循环打勾,否则数据可能会被更改或销毁。
image.getNativeHandle()
macOS
返回Buffer
- 存储指向图像底层本机句柄的 C 指针的缓冲区。在 macOS 上,NSImage
会返回一个指向实例的指针。
请注意,返回的指针是指向底层本机映像而不是副本的弱指针,因此您必须确保关联的nativeImage
实例保持在附近。
image.isEmpty()
返回Boolean
- 图像是否为空。
image.getSize()
返回 Size
image.setTemplateImage(option)
option
布尔
将图像标记为模板图像。
image.isTemplateImage()
返回Boolean
- 图像是否是模板图像。
image.crop(rect)
rect
矩形 - 要裁剪的图像区域
返回NativeImage
- 裁剪的图像。
image.resize(options)
options
目的width
整数(可选) - 默认为图像的宽度。height
整数(可选) - 默认为图像的高度quality
字符串(可选) - 调整图像所需的质量。可能的值good
,better
或best
。默认是best
。这些值表示期望的质量/速度折衷。它们被转换为一种算法特定的方法,这取决于底层平台的功能(CPU,GPU)。所有三种方法都可以映射到给定平台上的相同算法。
返回NativeImage
- 调整大小的图像。
如果只指定了height
或者,width
则当前的宽高比将保存在调整大小的图像中。
image.getAspectRatio()
返回Float
- 图像的宽高比。
image.addRepresentation(options)
options
目的scaleFactor
Double - 为图像添加图像表示的比例因子。width
整数(可选) - 默认为0.如果指定了位图缓冲区,则为必需buffer
。height
整数(可选) - 默认为0.如果指定了位图缓冲区,则为必需buffer
。buffer
缓冲区(可选) - 包含原始图像数据的缓冲区。dataURL
字符串(可选) - 包含基本64编码的 PNG 或 JPEG 图像的数据 URL。
添加特定比例因子的图像表示。这可以用来明确地向图像添加不同的比例因子表示。这可以在空图像上调用。
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com