Node.js服务端Canvas验证码报错：TypeError: ctx.toDataURL is not a function

这个错误的核心原因是：toDataURL()是Canvas实例的方法，而非2D绘图上下文(ctx)的方法。你错误地在ctx对象上调用了它，自然会提示该方法不存在。

修正方案 #

将代码中的：

let image = ctx.toDataURL()

替换为：

let image = canvas.toDataURL()

完整修正后的代码示例 #

import { createCanvas, loadImage, registerFont } from 'canvas';

// 补充缺失的randomColor函数示例
function randomColor(): string {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
}

// 补充缺失的验证码文本示例
const captchaText = 'ABCD';

const canvas = createCanvas(100, 40);
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#ecedee';
ctx.fillRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < 5; i++) {
    ctx.strokeStyle = randomColor();
    ctx.beginPath();
    ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
    ctx.stroke();
}
 
ctx.font = 'bold 30px Arial'; // 替换为实际可用的字体
ctx.fillStyle = '#6c757d';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(captchaText, canvas.width / 2, canvas.height / 2);

// 修正：调用canvas实例的toDataURL方法
let image = canvas.toDataURL();

额外补充两个细节：

• 原代码中randomColor和captchaText未定义，需要自行实现或赋值才能正常运行
• ctx.font中的YourFontFamily需要替换为系统中存在的字体（比如Arial），否则可能无法正常渲染文本

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