nativeImage

Electronでは、画像を取得するAPI用に、ファイルパスまたはnativeImageインスタンスを渡します。nullを渡すと、空のイメージが使われます。

例えば、トレイを作成したり、ウィンドウアイコンを設定する時、Stringとしてイメージファイルパスを渡します:

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アイコンをロードできます。

高解像度画像

高DPIに対応しているプラットフォームで、高解像度としてマークするためにイメージの基本ファイル名の後に@2xを追加できます。

例えば、icon.pngは一般的な解像度の通常の画像で、icon@2x.pngは、倍のDPI密度を持つ高解像度画像として扱われます。

同時に異なるDPI密度をディスプレイで対応したい場合、同じフォルダーに異なるサイズの画像を置き、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

テンプレート画像

テンプレート画像は、黒とクリアな色（とアルファチャンネル）で成り立ちます。テンプレート画像は画像単体での使用は想定しておらず、通常は最終的にほしい画像を生成するためにほかのコンテンツと合成します。

もっとも一般的なケースは、ライトとダークなメニュバー両方に切り替え可能なメニュバーアイコン用にテンプレート画像を使います。

Note: テンプレート画像は、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 (optional)

    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()

PNGエンコードされた画像を含むBufferを返します。

image.toJpeg(quality)

  • quality Integer (required) - Between 0 - 100.

JPEGエンコードされた画像を含むBufferを返します。

image.toDataURL()

画像のURLデータを返します。

image.isEmpty()

画像が空かどうかをブーリアン値で返します。

image.getSize()

画像サイズを返します。

image.setTemplateImage(option)

  • option Boolean

テンプレート画像としてマークします。

image.isTemplateImage()

イメージがテンプレート画像かどうかをブーリアン値で返します。