javascript - 如何在Electron中解决托盘图标模糊的问题？

Question

electron托盘图标模糊，怎么解决？

给出代码解决或图片

Answer 1

在 Electron 中解决托盘图标模糊问题的关键是提供多分辨率图标并正确设置缩放参数。以下是具体解决方案：

const { app, Tray, nativeImage } = require('electron')
const path = require('path')

function createTray() {
  // 根据系统缩放比例自动选择图标
  const iconPath = path.join(
    __dirname,
    `assets/icons/tray/${process.platform === 'win32' ? 'windows' : 'mac'}`,
    `icon${getBestIconSuffix()}.png`
  )

  const image = nativeImage.createFromPath(iconPath)
  image.setTemplateImage(true) // macOS 需要设置为模板图

  const tray = new Tray(image)
}

// 获取最佳图标后缀
function getBestIconSuffix() {
  const scaleFactor = require('electron').screen.getPrimaryDisplay().scaleFactor
  return scaleFactor >= 2 ? '@2x' : ''
}

关键步骤说明：

1. 图标文件规范：

   • 准备两套图标文件：

     • icon.png（基础尺寸，建议 16x16/24x24）
     • [e-mail]（高分辨率，建议 32x32/48x48）
   • Windows 推荐使用 .ico 格式（包含多个尺寸）

2. 文件目录结构：

   assets/
   └── icons/
       └── tray/
           ├── windows/
           │   ├── icon.ico
           │   └── [e-mail]
           └── mac/
               ├── icon.png
               └── [e-mail]

3. Windows 专用处理：

   // 使用 ICO 文件包含多尺寸图标
   if (process.platform === 'win32') {
     const iconPath = path.join(__dirname, 'assets/icons/windows/icon.ico')
     const image = nativeImage.createFromPath(iconPath)
     tray.setImage(image)
   }

注意事项：

• 对于 PNG 图标，必须提供 @2x 版本的高清图标
• 在 Windows 上优先使用包含多个尺寸的 ICO 文件
• 使用 nativeImage 处理图标加载，不要直接使用文件路径

• 监听显示器缩放变化动态更新图标：

  screen.on('display-metrics-changed', () => {
    tray.setImage(nativeImage.createFromPath(getCurrentIconPath()))
  })

图标尺寸建议：

平台	标准尺寸	高分屏尺寸
Windows	16x16, 24x24	32x32, 48x48
macOS	22x22	44x44

通过以上方法可以确保在不同DPI缩放比例（100%/150%/200%）下都能显示清晰的托盘图标。