×

Electron 教程

Electron 教程简介Electron 快速入门Electron 桌面环境集成Electron 在线/离线事件探测Electron 进程支持的 Chrome 命令行开关Electron 环境变量Electron 支持的平台Electron 应用部署Mac App Store 应用提交向导Electron 应用打包Electron 使用原生模块Electron 主进程调试使用 Selenium 和 WebDriverElectron DevTools扩展使用 Pepper Flash 插件使用 Widevine CDM 插件Electron 术语表Electron 离屏渲染Electron 交互式解释器 (REPL)Electron 自动更新功能autoUpdater

Electron API

Electron DOM File对象Electron DOM <webview>Electron window.open 函数

在主进程内可用的模块

Electron app 模块Electron autoUpdater 模块Electron BrowserWindow 模块Electron contentTracing 模块Electron dialog 模块Electron global-shortcut 模块Electron ipcMain 模块Electron menu 模块Electron MenuItem 模块Electron powerMonitor 模块Electron powerSaveBlockerElectron protocol 模块Electron session 模块Electron webContents 模块Electron Tray 模块Electron Locales

在渲染进程(网页)可用模块

Electron desktopCapturer模块Electron ipcRenderer 模块Electron remote 模块Electron webFrame 模块

两种进程都可用的模块

Electron clipboard 模块Electron crashReporter 模块Electron nativeImage 模块Electron screen 模块Electron shell 模块

Electron 开发

Electron 编码规范Electron 源码目录结构Electron 和 NW.js技术上的差异Electron 构建系统概览Electron 构建步骤 (OS X)Electron 构建步骤 (Windows)Electron 构建步骤 (Linux)调试中使用 Symbol ServerElectron 常见问题Electron 版本管理electron window 提交指南自动化持续集成系统(CI)测试Electron 文档风格指南

Electron nativeImage 模块


在 Electron 中, 对所有创建 images 的 api 来说, 你可以使用文件路径或 nativeImage 实例. 如果使用 null ,将创建一个空的image 对象.

例如, 当创建一个 tray 或设置窗口的图标时候,你可以使用一个字符串的图片路径 :

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

或者从剪切板中读取图片,它返回的是 nativeImage:

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

支持的格式

当前支持 PNG  JPEG 图片格式. 推荐 PNG ,因为它支持透明和无损压缩.

在 Windows, 你也可以使用 ICO 图标的格式.

高分辨率图片

如果平台支持 high-DPI,你可以在图片基础路径后面添加 @2x ,可以标识它为高分辨率的图片.

例如,如果 icon.png 是一个普通图片并且拥有标准分辨率,然后 icon@2x.png将被当作高分辨率的图片处理,它将拥有双倍 DPI 密度.

如果想同时支持展示不同分辨率的图片,你可以将拥有不同size 的图片放在同一个文件夹下,不用 DPI 后缀.例如 :

images/
├── icon.png
├── icon@2x.png
└── icon@3x.png
var appIcon = new Tray('/Users/somebody/images/icon.png');

也支持下面这些 DPI 后缀:

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

模板图片

模板图片由黑色和清色(和一个 alpha 通道)组成. 模板图片不是单独使用的,而是通常和其它内容混合起来创建期望的最终效果.

最常见的用力是将模板图片用到菜单栏图片上,所以它可以同时适应亮、黑不同的菜单栏.

注意: 模板图片只在 OS X 上可用.

为了将图片标识为一个模板图片,它的文件名应当以 Template 结尾. 例如:

  • xxxTemplate.png
  • xxxTemplate@2x.png

方法

nativeImage 类有如下方法:

nativeImage.createEmpty()

创建一个空的 nativeImage 实例.

nativeImage.createFromPath(path)

  • path String

从指定 path 创建一个新的 nativeImage 实例 .

nativeImage.createFromBuffer(buffer[, scaleFactor])

  • buffer Buffer
  • scaleFactor Double (可选)

 buffer 创建一个新的 nativeImage 实例 .默认 scaleFactor 是 1.0.

nativeImage.createFromDataURL(dataURL)

  • dataURL String

 dataURL 创建一个新的 nativeImage 实例 .

实例方法

nativeImage 有如下方法:

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

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

image.toPng()

返回一个 Buffer ,它包含了图片的 PNG 编码数据.

image.toJpeg(quality)

  • quality Integer (必须) - 在 0 - 100 之间.

返回一个 Buffer ,它包含了图片的 JPEG 编码数据.

image.toDataURL()

返回图片数据的 URL.

image.getNativeHandle() OS X

返回一个保存了 c 指针的 Buffer 来潜在处理原始图像.在OS X, 将会返回一个 NSImage 指针实例.

注意那返回的指针是潜在原始图像的弱指针,而不是一个复制,你必须 确保与 nativeImage 的关联不间断 .

image.isEmpty()

返回一个 boolean ,标识图片是否为空.

image.getSize()

返回图片的 size.

image.setTemplateImage(option)

  • option Boolean

将图片标识为模板图片.

image.isTemplateImage()

返回一个 boolean ,标识图片是否是模板图片.


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)