使用 node-canvas 时，若文字出现在背景图像下方，根本原因是绘制顺序错误——必须先加载并绘制背景图像，再绘制文字；否则异步加载的图像会覆盖已绘制的文字。
使用 node-canvas 时，若文字出现在背景图像下方，根本原因是绘制顺序错误——必须先加载并绘制背景图像，再绘制文字；否则异步加载的图像会覆盖已绘制的文字。
在 node-canvas 中实现「图像为背景 + 文字浮于其上」的效果，关键在于严格控制绘制时序。Canvas 是基于立即模式（immediate mode）的绘图 API，所有操作按代码执行顺序逐帧叠加：后绘制的内容覆盖先绘制的内容。而 loadImage() 是一个 Promise 异步操作，若将文字绘制逻辑写在 loadImage().then(...) 外部，文字会在图像加载完成前就被渲染到空白画布上；随后图像被绘制时，自然会完全遮盖已有文字——这正是原始代码中“文字出现在图像下方”的真实原因。
✅ 正确做法是：将所有前景内容（文字、形状、图标等）的绘制逻辑全部放入 loadImage().then() 回调内部，确保它们在背景图像成功加载并绘制完成后才执行。
以下是优化后的完整示例（含健壮性增强）：
const { createCanvas, loadImage } = require('canvas');
const fs = require('fs');
const width = 848;
const height = 600;
const canvas = createCanvas(width, height);
const ctx = canvas.getContext('2d');
// ✅ 关键：所有绘制操作均置于 loadImage 的 then 回调内
loadImage('./assets/jimp-cert-template.jpg')
.then((image) => {
// 1. 绘制背景：铺满整个画布
ctx.fillStyle = ctx.createPattern(image, 'no-repeat');
ctx.fillRect(0, 0, width, height);
// 2. 配置并绘制标题文字（注意：字体单位用 pt 在 node-canvas 中可能渲染异常，推荐改用 px）
ctx.font = 'bold 70px "PT Sans"'; // ✅ 改用 px 更可靠
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'; // ✅ 建议显式设置基线，提升定位精度
ctx.fillStyle = '#764abc';
ctx.fillText('TITLE 1', 600, 170);
ctx.font = 'bold 100px "PT Sans"';
ctx.fillText('TITLE 2', 600, 270);
// 3. 输出图像
const buffer = canvas.toBuffer('image/jpeg');
fs.writeFileSync('./image.jpeg', buffer);
console.log('✅ Certificate generated successfully!');
})
.catch((err) => {
console.error('❌ Failed to load or render image:', err);
});
? 重要注意事项：
-
字体单位建议用
px而非pt：node-canvas 对pt支持不一致，尤其在无 GUI 环境下易导致文字不可见或尺寸异常；px单位更可控。 -
务必设置
textBaseline：默认为alphabetic，可能导致垂直位置偏差；设为'middle'或'top'可精准控制文字纵向对齐。 -
错误处理不可省略：
loadImage()可能因路径错误、文件损坏或字体缺失而 reject，需用.catch()捕获并调试。 - 避免跨域图像问题：若加载远程 URL 图像，请确保服务端配置了正确的 CORS 头，或使用本地绝对路径。
通过遵循「先背景、后前景」「同步操作置于异步回调内」的原则，即可稳定实现图文分层效果——图像作为底层背景完整铺满，文字清晰悬浮于其上，真正达成专业证书/海报级的合成需求。
