使用Canvas为图片添加文字后文字未显示的问题求助

安全阿岳

2026-4-17

Hey there! Let's dig into why your text isn't showing up on the final uploaded image. From the code snippet you shared and common Canvas pitfalls, here are some key things to check:

图片加载时机不对
Canvas绘制图片是异步操作——如果在原始图片加载完成前就尝试绘制文字或者把Canvas转成图片，这些操作根本不会生效。一定要把所有绘制逻辑放在图片的onload回调里，或者用Promise等待图片完全加载后再继续执行后续步骤。
坐标计算可能有问题
你算出的actualX和actualY可能把文字画到了Canvas可视范围之外。可以先试试用固定坐标（比如50, 50）绘制文字，如果能显示，说明你的偏移量计算大概率出错了，得重新核对leftOffset和topOffset与Canvas、图片尺寸的对应关系。
Canvas尺寸不匹配
如果Canvas的像素尺寸（通过canvas.width和canvas.height设置）和图片实际尺寸不一致，绘制的内容可能会被拉伸、裁剪或者直接看不到。一定要把Canvas的宽高设置成和图片自然宽高一致，别只靠CSS样式来调整。
文字样式太不显眼
很容易不小心把文字颜色设成和图片背景一致，或者字体太小导致看不到。可以先试试用高对比度的亮色（比如亮红色）和大字号来测试，排除这个问题。
过早转换Canvas为图片
一定要等所有绘制操作（包括文字绘制）完全完成后，再调用toDataURL()或toBlob()把Canvas转成图片。如果绘制过程中有异步操作，必须等它执行完毕。

这里给你调整后的示例函数，帮你规避这些常见问题：

async function saveConfiguration() {
  try {
    const {
      left: caseLeft,
      top: caseTop,
      width,
      height,
    } = phoneCaseRef.current!.getBoundingClientRect();

    const { left: containerLeft, top: containerTop } =
      containerRef.current!.getBoundingClientRect();

    const leftOffset = caseLeft - containerLeft;
    const topOffset = caseTop - containerTop;

    const actualX = renderedPosition.x - leftOffset;
    const actualY = renderedPosition.y - topOffset;

    // 第一步：正确加载图片
    const img = new Image();
    // 如果图片来自跨域地址，需要开启这个设置
    img.crossOrigin = "anonymous";
    img.src = "你的图片地址"; // 替换成你的图片URL或data URI

    // 等待图片加载完成
    await new Promise((resolve, reject) => {
      img.onload = resolve;
      img.onerror = () => reject(new Error("图片加载失败"));
    });

    // 第二步：创建和图片尺寸一致的Canvas
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    if (!ctx) throw new Error("无法获取Canvas上下文");
    
    canvas.width = img.width;
    canvas.height = img.height;

    // 第三步：先绘制图片到Canvas
    ctx.drawImage(img, 0, 0);

    // 第四步：设置显眼的文字样式（用于测试）
    ctx.font = "32px Arial";
    ctx.fillStyle = "#ff0000"; // 亮红色
    ctx.textAlign = "left";
    ctx.textBaseline = "top";

    // 第五步：绘制文字（先用固定坐标测试）
    ctx.fillText("测试文字", 50, 50);
    // 确认生效后，再换成你计算的坐标：
    // ctx.fillText("你的自定义文字", actualX, actualY);

    // 第六步：把Canvas转成Blob用于上传
    const canvasBlob = await new Promise((resolve) => {
      canvas.toBlob(resolve, "image/png");
    });

    // 这里写你的服务器上传逻辑...

  } catch (error) {
    console.error("保存配置出错:", error);
  }
}

试试这些调整吧——大概率其中某一点就是你文字消失的原因！

备注：内容来源于stack exchange，提问作者Ismael Perez Gonzalez