Node-Canvas 图文叠加：解决文字被背景图片遮盖的问题-html教程-PHP中文网

Node-Canvas 图文叠加：解决文字被背景图片遮盖的问题

使用 node-canvas 时，若先绘制文字再加载并填充背景图，文字会被后绘制的图像覆盖；正确做法是确保背景图像绘制完成后再添加文字内容，从而实现文字清晰显示在图像之上的效果。

使用 node-canvas 时，若先绘制文字再加载并填充背景图，文字会被后绘制的图像覆盖；正确做法是确保背景图像绘制完成后再添加文字内容，从而实现文字清晰显示在图像之上的效果。

在 Node.js 环境中使用 node-canvas 生成带背景图和叠加文字的图像时，绘制顺序至关重要。Canvas 是一个基于“栈式”渲染的位图上下文：后执行的 fillRect()、drawImage() 等操作会覆盖先前已绘制的内容（包括文字）。原代码中，loadImage().then(...) 被放在文字绘制之后，导致文字先被画出，而背景图在 Promise 解析后才填充——此时 fillRect(0, 0, width, height) 实际上用图案重绘了整块画布，自然将原有文字完全覆盖。

✅ 正确逻辑应为：

先异步加载背景图像；
立即用该图像填充整个画布作为底层背景；
再调用 fillText() 等方法在已有背景上叠加文字。

以下是优化后的完整示例（含关键注释与健壮性增强）：

jinn-node

在Jinn网络为自主项目工作赚取代币奖励，让闲置的OpenClaw代理开始工作。

下载

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.drawImage(image, 0, 0, width, height);

    // 2️⃣ 设置标题 1 样式与位置
    ctx.font = "bold 70pt 'PT Sans'";
    ctx.textAlign = "center";
    ctx.fillStyle = "#764abc";
    ctx.fillText("TITLE 1", 600, 170);

    // 3️⃣ 设置标题 2 样式与位置
    ctx.font = "bold 100pt 'PT Sans'";
    ctx.fillText("TITLE 2", 600, 270);

    // 4️⃣ 输出图像
    const buffer = canvas.toBuffer("image/jpeg");
    fs.writeFileSync("./image.jpeg", buffer);
    console.log("✅ Certificate generated successfully!");
  })
  .catch((err) => {
    console.error("❌ Failed to load image or render canvas:", err);
  });

⚠️ 注意事项：

不要使用 createPattern(..., "no-repeat") 填充背景：除非你明确需要平铺效果，否则 ctx.drawImage(image, 0, 0, width, height) 更直观、可控，且能自动缩放适配画布。
字体需提前安装或使用 Web 字体 fallback：'PT Sans' 在服务器环境可能不可用，建议通过 canvas.registerFont() 注册本地 .ttf 文件，或改用系统安全字体如 'sans-serif'。
坐标需校验合理性：例如 fillText("TITLE 1", 600, 170) 中 x=600 接近画布右边界（宽 848），若文字过长可能被截断，建议配合 ctx.measureText().width 动态居中。
异步流程不可拆分：所有绘图操作必须位于 loadImage().then() 内部，避免竞态问题。