Electron环境下skia-canvas无法向图像画布添加文本问题排查求助

结合你的场景——Node.js环境运行正常、Electron里仅文本失效且无报错，这大概率是字体加载异常或者Electron的环境限制导致的，以下是几个针对性的排查和解决步骤：

1. 手动注册字体（最常见的解决方案） #

skia-canvas在Node.js环境中可能会自动识别系统字体，但Electron的资源路径逻辑、沙箱限制可能导致它找不到你指定的Open Sauce Sans字体。直接通过registerFont手动加载本地字体文件即可解决：

const { Canvas, loadImage, registerFont } = require('skia-canvas');

// 先注册字体，确保路径对应你项目中的字体文件位置
registerFont('./assets/fonts/OpenSauceSans-Bold.ttf', { 
  family: 'Open Sauce Sans',
  weight: 'bold'
});

// 你的原有代码
const canvas = new Canvas(1920, 1080)
const context = canvas.getContext("2d")
const bk = await loadImage('image.png')
context.filter = 'grayscale(100%) brightness(80%) contrast(150%)'
drawImageProp(context, bk, 0, 0, 1920, 1080)
context.filter = 'none'
const logo = await loadImage('logo.png')
context.drawImage(logo, 0, 0)
const X_TEXT_POSITION = 107
context.font = 'bold 170px Open Sauce Sans'
context.fillStyle = "#ffffff"
context.fillText('Some Text', X_TEXT_POSITION, 375)

2. 检查Electron的沙箱与权限设置 #

如果你的Electron开启了沙箱模式，渲染进程的权限会被限制，可能影响skia-canvas访问系统字体或本地资源。可以临时关闭沙箱测试：

// 在Electron的main.js中创建窗口时修改配置
const { BrowserWindow } = require('electron');

const mainWindow = new BrowserWindow({
  webPreferences: {
    sandbox: false, // 临时关闭沙箱验证
    nodeIntegration: true,
    contextIsolation: false // 如果你的代码需要直接调用Node API的话
  }
});

验证问题解决后，再考虑通过更安全的方式配置权限（比如预加载脚本），而不是长期关闭沙箱。

3. 验证字体是否成功加载 #

可以添加一段代码检查当前可用字体列表，确认Open Sauce Sans是否存在：

const availableFonts = canvas.getAvailableFonts();
console.log('当前可用字体:', availableFonts);

如果输出中没有目标字体，说明字体确实未被加载，回到步骤1确保字体路径正确、文件存在。

4. 排查版本兼容性问题 #

你使用的skia-canvas ^0.9.25可能和当前Electron版本存在兼容性问题。可以尝试：

• 升级skia-canvas到最新稳定版
• 或降级到0.9.x系列的其他版本（比如0.9.28），测试是否解决问题

内容的提问来源于stack exchange，提问作者ionuttibi