electron 为SVG原生图像添加支持

lo8azlld  于 6个月前  发布在  Electron
关注(0)|答案(9)|浏览(74)
  • Electron版本:1.6.10
  • 操作系统:elementary OS 0.4.1 Loki

预期行为

应该可以设置一个托盘图像为SVG格式。这将允许托盘图标适应当前主题(例如,在黑色上显示白色,或在白色上显示黑色)。

实际行为

图像必须作为PNG或JPG提供,因此无法适应平台的主题。

如何重现

new Tray('/path/to/image.png');
vxf3dgd4

vxf3dgd41#

我很喜欢这个。

z0qdvdin

z0qdvdin2#

关于这个的支持❓
已经过去一年了。实现起来困难吗❓

9rygscc1

9rygscc13#

你好。昨天我一直在寻找这个,似乎StatusIcon是GTK(自3.14起)的一个已弃用的功能。我们现在需要使用GNotification + Dbus(在linux上)。处理状态图标的代码由Chromium本身管理。所以如果你想解决这个问题,我们需要找到一种直接修复Chromium上的GTK StatusIcon的方法。
关于这个问题的更多信息将在上面提到的mattermost/desktop issue上发布。

apeeds0o

apeeds0o4#

这个有什么更新吗?

ie3xauqp

ie3xauqp5#

仅供参考,一个很好的解决方法是使用sharp库动态转换图像:

const trayIcon = Buffer.from(`
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
  </svg>
`);

const icon = await sharp(trayIcon).png().resize(16, 16).toBuffer();
tray.setImage(nativeImage.createFromBuffer(icon));

https://www.npmjs.com/package/sharp

3phpmpom

3phpmpom6#

仅供参考,一个很好的解决方法是使用sharp库动态转换图像:

const trayIcon = Buffer.from(`
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
  </svg>
`);

const icon = await sharp(trayIcon).png().resize(16, 16).toBuffer();
tray.setImage(nativeImage.createFromBuffer(icon));

https://www.npmjs.com/package/sharp
一直在寻找解决方法,谢谢,我会尝试一下。

bakd9h0s

bakd9h0s7#

https://github.com/yisibl/resvg-js 是一个比sharp更好的库,同时也支持m1 Mac。

Running "resize width" suite...
  resvg-js(Rust):
    12 ops/s, ±22.66%   | fastest 🚀

  sharp:
    9 ops/s, ±64.52%    | 25% slower

  skr-canvas(Rust):
    7 ops/s, ±3.72%    | 41.67% slower

  svg2img(canvg and node-canvas):
    6 ops/s, ±16.94%    | slowest, 50% slower
xiozqbni

xiozqbni8#

你好,这确实是一个解决方法,但是你如何利用模板图像模式来实现这个?
谢谢!

llew8vvj

llew8vvj9#

我在几天前向您报告了相同的问题(在不知道您的问题的情况下),并为开发人员提供了一些额外的信息 #9642

相关问题