非常教程

Electron参考手册

本地图像 | nativeImage

本地图像 | 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)

支持的格式

目前PNGJPEG图像格式支持。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字符串(可选) - 调整图像所需的质量。可能的值goodbetterbest。默认是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。

添加特定比例因子的图像表示。这可以用来明确地向图像添加不同的比例因子表示。这可以在空图像上调用。

本地图像 | nativeImage相关

Electron

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。

主页 https://electron.atom.io/
源码 https://github.com/electron/electron
发布版本 1.7.9

Electron目录

1.指南 | Guides
2.指南·开发 | Guides: Development
3.Webview 组件 |
4.加速器 | Accelerator
5.API
6.API·对象 | API·Objects
7.app
8.autoUpdater
9.浏览器总览 | BrowserView
10.浏览器窗口 | BrowserWindow
11.浏览器窗口代理 | BrowserWindowProxy)
12.ClientRequest
13.剪贴板 | clipboard
14.内容追踪 | contentTracing
15.小型文字档案 | Cookies
16.crashReporter
17.调试器 | Debugger
18.desktopCapturer
19.dialog
20.电子下载 | DownloadItem
21.环境变量 | Environment Variables
22.无框窗口 | Frameless Window
23.globalShortcut
24.IncomingMessage
25.ipcMain
26.IPC渲染器 | ipcRenderer
27.语言环境 | Locales
28.画面 | Menu
29.MenuItem
30.本地图像 | nativeImage
31.net
32.通知 | Notification
33.权限监控 | powerMonitor
34.权限存储拦截器 | powerSaveBlocker
35.处理 | process
36.协议 | protocol
37.远程 | remote
38.sandbox
39.屏幕 | screen
40.会话 | session
41.shell
42.系统表现 | systemPreferences
43.触摸板 | TouchBar
44.触摸板按钮 | TouchBarButton
45.触摸板颜色选择器 | TouchBarColorPicker
46.触摸板组 | TouchBarGroup
47.触摸板标签 | TouchBarLabel
48.触摸板弹出框 | TouchBarPopover
49.触摸板清理 | TouchBarScrubber
50.触摸板分段控制 | TouchBarSegmentedControl
51.触摸板滑块 | TouchBarSlider
52.触摸板间隔 | TouchBarSpacer
53.Tray
54.网页内容 | webContents
55.网页框架 | webFrame
56.网页要求 | WebRequest
57.窗口开启 | window.open