为什么 HTML5 Canvas 下载空白图像（以及如何修复）

Source: Dev.to

有效的情况

• 变体文字在屏幕上可见。
• Canvas 元素存在且显示正确的尺寸。
• 下载功能被正确触发。

不起作用的情况

• canvas.toDataURL() 返回一张空白的白色图像。
• 绘制在 canvas 上的文字未出现在下载的图像中。

可能的原因

• Web 字体在绘制文字之前未完全加载。
• Canvas 内容是通过 CSS 变换（旋转/缩放）绘制的。
• 绘制发生在与下载的 canvas 不同的 canvas 上。
• Canvas 的宽高不匹配。

简化代码

const canvas = document.getElementById("ambigramCanvas");
const ctx = canvas.getContext("2d");

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = "40px AmbigramFont";
ctx.textAlign = "center";
ctx.fillStyle = "#000";
ctx.fillText("TEST", canvas.width / 2, canvas.height / 2);

function downloadCanvas() {
  const link = document.createElement("a");
  link.download = "ambigram.png";
  link.href = canvas.toDataURL("image/png");
  link.click();
}

问题

正确的做法是什么，以确保：

• 生成的变体文字真正绘制到 canvas 中。
• 在导出之前 Web 字体已完全加载。
• 下载的 canvas 图像与视觉上显示的内容一致？

任何指导或最佳实践都将不胜感激。

Related site: ambigramtools.com