TypeScript electron.nativeImage類代碼示例

app.on("ready", () => {
    const bounds = windowBounds();

    let options: Electron.BrowserWindowConstructorOptions = {
        webPreferences: {
            experimentalFeatures: true,
            experimentalCanvasFeatures: true,
        },
        titleBarStyle: "hidden",
        resizable: true,
        minWidth: 500,
        minHeight: 300,
        width: bounds.width,
        height: bounds.height,
        x: bounds.x,
        y: bounds.y,
        show: false,
    };
    const browserWindow = new BrowserWindow(options);

    if (app.dock) {
        app.dock.setIcon(nativeImage.createFromPath("build/icon.png"));
    } else {
        browserWindow.setIcon(nativeImage.createFromPath("build/icon.png"));
    }

    browserWindow.loadURL("file://" + __dirname + "/../views/index.html");

    browserWindow.webContents.on("did-finish-load", () => {
        browserWindow.show();
        browserWindow.focus();
    });

    app.on("open-file", (_event, file) => browserWindow.webContents.send("change-working-directory", file));
});

/**
@returns An icon to use for the menu item of this emoji style.
*/
async function getEmojiIcon(style: EmojiStyle): Promise<NativeImage | undefined> {
	const cachedIcon = cachedEmojiMenuIcons.get(style);

	if (cachedIcon) {
		return cachedIcon;
	}

	if (style === 'native') {
		if (!getWindow()) {
			return undefined;
		}

		const dataUrl = await renderEmoji('🙂');
		const image = nativeImage.createFromDataURL(dataUrl);
		const resizedImage = image.resize({width: 16, height: 16});

		cachedEmojiMenuIcons.set(style, resizedImage);

		return resizedImage;
	}

	const image = nativeImage.createFromPath(
		path.join(__dirname, '..', 'static', `emoji-${style}.png`)
	);

	cachedEmojiMenuIcons.set(style, image);

	return image;
}

  initTray(trayIcon = new Tray(nativeImage.createEmpty())) {
    const IMAGE_ROOT = path.join(app.getAppPath(), 'img');

    let trayPng = 'tray.png';
    let trayBadgePng = 'tray.badge.png';

    if (EnvironmentUtil.platform.IS_LINUX) {
      trayPng = `tray${EnvironmentUtil.linuxDesktop.isGnome ? '.gnome' : '@3x'}.png`;
      trayBadgePng = `tray.badge${EnvironmentUtil.linuxDesktop.isGnome ? '.gnome' : '@3x'}.png`;
    }

    const iconPaths = {
      badge: path.join(IMAGE_ROOT, 'taskbar.overlay.png'),
      tray: path.join(IMAGE_ROOT, 'tray-icon/tray', trayPng),
      trayWithBadge: path.join(IMAGE_ROOT, 'tray-icon/tray-with-badge', trayBadgePng),
    };

    this.icons = {
      badge: nativeImage.createFromPath(iconPaths.badge),
      tray: nativeImage.createFromPath(iconPaths.tray),
      trayWithBadge: nativeImage.createFromPath(iconPaths.trayWithBadge),
    };

    this.trayIcon = trayIcon;
    this.trayIcon.setImage(this.icons.tray);

    this.buildTrayMenu();
  }

  watcher.on(actions.notify, async (store, action) => {
    const {
      title = "itch",
      body,
      icon = DEFAULT_ICON,
      onClick,
    } = action.payload;

    if (Notification.isSupported()) {
      const n = new Notification({
        title,
        subtitle: null,
        body,
        icon: icon ? nativeImage.createFromPath(icon) : null,
        actions: null,
      });
      if (onClick) {
        n.on("click", e => {
          store.dispatch(actions.focusWindow({ window: "root" }));
          store.dispatch(onClick);
        });
      }
      n.show();
    } else {
      logger.warn(`Cannot show notification: ${body}`);
    }
  });

	(_event: ElectronEvent, {id, title, body, icon, silent}: NotificationEvent) => {
		const notification = new Notification({
			title,
			body,
			hasReply: true,
			icon: nativeImage.createFromDataURL(icon),
			silent
		});

		notifications.set(id, notification);

		notification.on('click', () => {
			mainWindow.show();
			sendAction('notification-callback', {callbackName: 'onclick', id});

			notifications.delete(id);
		});

		notification.on('reply', (_event, reply: string) => {
			// We use onclick event used by messenger to go to the right convo
			sendBackgroundAction('notification-reply-callback', {callbackName: 'onclick', id, reply});

			notifications.delete(id);
		});

		notification.on('close', () => {
			sendAction('notification-callback', {callbackName: 'onclose', id});

			notifications.delete(id);
		});

		notification.show();
	}

 thumbarButtons.forEach(thumbarButton => {
     const imagePath = path.join(__dirname.replace('api', ''), 'bin', thumbarButton.icon.toString());            
     thumbarButton.icon = nativeImage.createFromPath(imagePath);
     thumbarButton.click = () => {
         socket.emit("thumbarButtonClicked", thumbarButton["id"]);
     };
 });

function createTrayIconImage(imageName: string) {
  const image =
      nativeImage.createFromPath(path.join(app.getAppPath(), 'resources', 'tray', imageName));
  if (image.isEmpty()) {
    throw new Error(`cannot find ${imageName} tray icon image`);
  }
  return image;
}

			const items = conversations.map(({label, icon}, index) => {
				return {
					label: `${label}`,
					icon: nativeImage.createFromDataURL(icon),
					click: () => {
						mainWindow.show();
						sendAction('jump-to-conversation', index + 1);
					}
				};
			});

	const items = conversations.map(({label, selected, icon}, index: number) => {
		return new TouchBarButton({
			label: label.length > 25 ? label.slice(0, 25) + '…' : label,
			backgroundColor: selected ? '#0084ff' : undefined,
			icon: nativeImage.createFromDataURL(icon),
			iconPosition: 'left',
			click: () => {
				sendAction('jump-to-conversation', index + 1);
			}
		});
	});

export function saveAsPng(data:ImageData,outfile:string){
    var canv = document.createElement('canvas');
    canv.width=data.width;
    canv.height=data.height;
    var ctx = canv.getContext('2d');
    ctx.putImageData(data,0,0);
    var buf = canv.toDataURL('image/png');
    var nimg = nativeImage.createFromDataURL(buf);
    fs.writeFileSync(outfile,nimg.toPng());
    return nativeImage;
}