3. nativeImage

原文:https://github.com/electron/electron/blob/master/docs/api/native-image.md
譯者:Lin

使用PNG或JPG文件創(chuàng)建托盤圖標(biāo)惩激,dock圖標(biāo)和應(yīng)用圖標(biāo)。

進(jìn)程:進(jìn)程:主進(jìn)程渲染進(jìn)程

Electron中娇掏,對(duì)于需要圖像的接口唠雕,你可以傳入文件的路徑或者NativeImage實(shí)例本昏。當(dāng)傳入null時(shí)將使用一個(gè)空的圖像汉形。

例如痢虹,當(dāng)創(chuàng)建一個(gè)托盤活著設(shè)置一個(gè)窗口的圖標(biāo)武氓,你可以傳入一個(gè)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)

支持的類型

當(dāng)前支持PNGJPEG圖像類型梯皿。建議使用PNG仇箱,因?yàn)樗С滞该骱蜔o損壓縮。

Windows中索烹,你也可以從文件路徑中加載ICO圖標(biāo)工碾。為了最好的可視化效果,建議至少包含以下尺寸:

  • 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

點(diǎn)擊this article中的Size requirements部分百姓。

高分辨率圖像

有支持高DPI的平臺(tái)上渊额,例如蘋果Retina顯示屏,你可以在圖像的基本文件名的后面添加@2x來標(biāo)記這個(gè)事一個(gè)高分辨率的圖像垒拢。

例如旬迹,如果icon.png是一個(gè)標(biāo)準(zhǔn)分辨率的正常圖像,那么icon@2x.png將被處理為一個(gè)有兩倍DPI密度的高分辨率圖像求类。

如果你想同時(shí)支持不同DPI密度顯示屏奔垦,你可以將不同尺寸的圖像放在同一個(gè)文件夾下,并且使用不包含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

模版圖像

模版圖像包括黑色和無顏色(和一個(gè)透明通道)椿猎。模版圖像是不打算被作為單獨(dú)的圖像而使用的,并且通常和其他內(nèi)容混合創(chuàng)建一個(gè)理想的最終形態(tài)寿弱。

最常見的情況是在菜單欄圖標(biāo)上使用模版圖像犯眠,所以它可以適應(yīng)淺色和暗色的菜單欄。

注意:只有MacOS支持模版圖像症革。

為了使用一個(gè)模版圖像筐咧,它的文件名字必須以Template單詞結(jié)尾。例如:

  • xxxTemplate.png
  • xxxTemplate@2x.png

方法

nativeImage模塊又以下方法噪矛,所有的方法斗返回一個(gè)NativeImage類的實(shí)例:

nativeImage.createEmpty()

返回值為NativeImage類型

創(chuàng)建一個(gè)空的NativeImage實(shí)例量蕊。

nativeImage.createFromPath(path)

  • path String類型

返回值為NativeImage類型

使用本地文件地址創(chuàng)建一個(gè)新的NativeImage實(shí)例。如果path不存在艇挨,或者不能被讀取残炮,或者不是一個(gè)圖像,那么這個(gè)方法返回一個(gè)空的圖像雷袋。

const nativeImage = require('electron').nativeImage

let image = nativeImage.createFromPath('/Users/somebody/images/icon.png')
console.log(image)

nativeImage.createFromBuffer(buffer[, options])

  • buffer Buffer類型
  • options Object類型(可選參數(shù))
    • width Integer類型(可選參數(shù))- 對(duì)于bitmap buffers是必須的參數(shù)吉殃。
    • height Integer類型(可選參數(shù))- 對(duì)于bitmap buffers是必須的參數(shù)。
    • scaleFactor Double類型(可選參數(shù))- 默認(rèn)是1.0楷怒。

返回值為NativeImage類型

通過buffer創(chuàng)建一個(gè)新的NativeImage實(shí)例蛋勺。

nativeImage.createFromDataURL(dataURL)

  • dataURL String類型

通過dataURL創(chuàng)建一個(gè)新的NativeImage實(shí)例。

類: NativeImage

使用PNG或JPG文件創(chuàng)建托盤圖標(biāo)鸠删,dock圖標(biāo)和應(yīng)用圖標(biāo)抱完。

進(jìn)程:主進(jìn)程渲染進(jìn)程

實(shí)例的方法

NativeImage類的實(shí)例有以下方法:

image.toPNG([options])

  • options Object類型(可選參數(shù))
    • scaleFactor Double類型(可選參數(shù))- 默認(rèn)是1.0刃泡。

返回值為Buffer類型 - 一個(gè)包含圖像的PNG編碼數(shù)據(jù)的Buffer巧娱。

image.toJPEG(quality)

  • quality Integer類型(必傳參數(shù))- 在0 - 100之間碉怔。

返回值為Buffer類型 - 一個(gè)包含圖像的JPEG編碼數(shù)據(jù)的Buffer

image.toBitmap([options])

  • options Object類型(可選參數(shù))
    • scaleFactor Double類型(可選參數(shù))- 默認(rèn)為1.0禁添。

返回值為Buffer類型 - 一個(gè)包含圖像的原始位圖的數(shù)據(jù)副本的Buffer撮胧。

image.toDataURL([options])

  • options Object類型(可選參數(shù))
    • scaleFactor Double類型(可選參數(shù))- 默認(rèn)為1.0。

返回值為String類型 - 圖片的數(shù)據(jù)地址老翘。

image.getBitmap([options])

  • options Object類型(可選參數(shù))
    • scaleFactor Double類型(可選參數(shù))- 默認(rèn)值為1.0芹啥。

返回值為Buffer類型 - 一個(gè)包含圖像的原始位圖的數(shù)據(jù)的Buffer

getBitmap()toBitmap()的區(qū)別是铺峭,getBitmap()不會(huì)復(fù)制位圖數(shù)據(jù)墓怀,所以你必須在當(dāng)前事件循環(huán)標(biāo)記中直接使用返回的Buffer,否則數(shù)據(jù)將會(huì)被改變或者被銷毀卫键。

image.getNativeHandle() MacOS

返回值為Buffer類型 - 一個(gè)存儲(chǔ)底層處理本地圖像的C指針的Buffer傀履。MacOS中,將返回一個(gè)指向NSImage實(shí)例的指針莉炉。

請(qǐng)注意钓账,返回的指針是一個(gè)指向底層的本地土圖像來代替一個(gè)副本的弱指針,所以你必須確保對(duì)應(yīng)的nativeImage實(shí)例一直存在絮宁。

image.isEmpty()

返回值為Boolean類型 - 圖像是否是空官扣。

image.getSize()

返回值為Object類型:

  • width Integer類型
  • height Integer類型

image.setTemplateImage(option)

  • option Boolean類型

將圖像轉(zhuǎn)為一個(gè)模版圖像。

image.isTemplateImage()

返回值為Boolean類型 - 圖像是否是一個(gè)模版圖像羞福。

image.crop(rect)

  • rect Object類型 - 圖像要修剪的區(qū)域
    • x Integer類型
    • y Integer類型
    • width Integer類型
    • height Integer類型

返回值為NativeImage類型 - 被修剪的圖像。

image.resize(options)

  • options Object類型
    • width Integer類型(可選參數(shù))- 默認(rèn)是圖像的寬
    • height Integer類型(可選參數(shù))- 默認(rèn)是圖像的高
    • quality String類型(可選參數(shù))- 期望的重設(shè)大小的圖片的質(zhì)量蚯涮。值可以是good治专、betterbest。默認(rèn)是best遭顶。這個(gè)值表示一個(gè)期望的質(zhì)量和速度张峰。它們將轉(zhuǎn)化為一個(gè)具體的算法,這個(gè)算法取決于底層平臺(tái)的處理能力(CPU棒旗,GPU)喘批。這三個(gè)方法可能在一個(gè)給定的平臺(tái)上被映射到同一個(gè)算法上。

返回值為NativeImage - 重設(shè)大小的圖像铣揉。

如果只指定了height或者width饶深,那么將使用當(dāng)前的縱橫比來重設(shè)圖像。

image.getAspectRatio()

返回值為Float類型 - 圖像的縱橫比逛拱。

image.addRepresentation(options)

  • options Object類型
    • scaleFactor Double類型 - The scale factor to add the image representation for.
    • width Integer類型(可選參數(shù))- 默認(rèn)為0敌厘。如果一個(gè)二進(jìn)制位圖傳給了buffer,那么這個(gè)選項(xiàng)必須設(shè)置朽合。
    • height Integer類型(可選參數(shù))- 默認(rèn)為0俱两。如果一個(gè)二進(jìn)制位圖傳給了buffer饱狂,那么這個(gè)選項(xiàng)必須設(shè)置。
    • buffer Buffer類型(可選參數(shù))- 包含原始圖像數(shù)據(jù)的buffer宪彩。
    • dataURL String類型(可選參數(shù))- 包含了base64編碼的PNG或JPEG圖像的數(shù)據(jù)地址休讳。

添加一個(gè)指定的縮放因數(shù)的圖像表現(xiàn)。這個(gè)可以被用來明確的添加不同縮放因素表現(xiàn)到一個(gè)圖像上尿孔。這個(gè)方法可以在空?qǐng)D像上調(diào)用俊柔。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市纳猫,隨后出現(xiàn)的幾起案子婆咸,更是在濱河造成了極大的恐慌,老刑警劉巖芜辕,帶你破解...
    沈念sama閱讀 206,968評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件尚骄,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡侵续,警方通過查閱死者的電腦和手機(jī)倔丈,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來状蜗,“玉大人需五,你說我怎么就攤上這事≡玻” “怎么了宏邮?”我有些...
    開封第一講書人閱讀 153,220評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)缸血。 經(jīng)常有香客問我蜜氨,道長(zhǎng),這世上最難降的妖魔是什么捎泻? 我笑而不...
    開封第一講書人閱讀 55,416評(píng)論 1 279
  • 正文 為了忘掉前任飒炎,我火速辦了婚禮,結(jié)果婚禮上笆豁,老公的妹妹穿的比我還像新娘郎汪。我一直安慰自己,他們只是感情好闯狱,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評(píng)論 5 374
  • 文/花漫 我一把揭開白布煞赢。 她就那樣靜靜地躺著,像睡著了一般扩氢。 火紅的嫁衣襯著肌膚如雪耕驰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,144評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音朦肘,去河邊找鬼饭弓。 笑死,一個(gè)胖子當(dāng)著我的面吹牛媒抠,可吹牛的內(nèi)容都是我干的弟断。 我是一名探鬼主播,決...
    沈念sama閱讀 38,432評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼趴生,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼阀趴!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起苍匆,我...
    開封第一講書人閱讀 37,088評(píng)論 0 261
  • 序言:老撾萬榮一對(duì)情侶失蹤刘急,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后浸踩,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體叔汁,經(jīng)...
    沈念sama閱讀 43,586評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評(píng)論 2 325
  • 正文 我和宋清朗相戀三年检碗,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了据块。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,137評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡折剃,死狀恐怖另假,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情怕犁,我是刑警寧澤边篮,帶...
    沈念sama閱讀 33,783評(píng)論 4 324
  • 正文 年R本政府宣布,位于F島的核電站奏甫,受9級(jí)特大地震影響苟耻,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜扶檐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望胁艰。 院中可真熱鬧款筑,春花似錦、人聲如沸腾么。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽解虱。三九已至攘须,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間殴泰,已是汗流浹背于宙。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評(píng)論 1 262
  • 我被黑心中介騙來泰國(guó)打工浮驳, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人捞魁。 一個(gè)月前我還...
    沈念sama閱讀 45,595評(píng)論 2 355
  • 正文 我出身青樓至会,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親谱俭。 傳聞我的和親對(duì)象是個(gè)殘疾皇子奉件,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • 原文:https://github.com/electron/electron/blob/master/docs/...
    Shmily落墨閱讀 18,992評(píng)論 1 5
  • 原文:https://github.com/electron/electron/blob/master/docs/...
    Shmily落墨閱讀 6,093評(píng)論 0 1
  • https://nodejs.org/api/documentation.html 工具模塊 Assert 測(cè)試 ...
    KeKeMars閱讀 6,305評(píng)論 0 6
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)昆著,斷路器县貌,智...
    卡卡羅2017閱讀 134,601評(píng)論 18 139
  • 前言: 自己作死下載了多個(gè)破解軟件,不知道那個(gè)可能程序有問題凑懂,導(dǎo)致了電腦重啟后無法開機(jī)煤痕,苦逼的只能重裝系統(tǒng),所以之...
    Eugene_iOS閱讀 15,732評(píng)論 3 10