调用Image实例onload时报TypeError: a.onload is not a function是什么原因？

核心结论 #

该报错和this指向无关，是API使用语法错误直接导致的。

具体问题点 #

• Image实例的onload是回调属性，不是可调用方法，原代码中ctx.onload(() => {})的写法不符合Web API规范，直接触发TypeError: a.onload is not a function报错。
• 变量命名不规范：你将Image实例命名为ctx，而业内通常用ctx指代canvas 2D绘制上下文，极易引发逻辑混淆。
• 存在拼写错误：绘制参数中的is.compositedCanvas.width多了多余前缀is.，实际应为this.compositedCanvas.width。
• 缺失图片加载触发逻辑：原代码没有给Image实例设置src属性，即使修复onload写法也无法触发加载回调。

修正后代码示例（Promise上下文环境） #

// 修正变量命名，避免和canvas上下文混淆
const img = new Image();
// 给onload属性赋值回调函数，而非调用
img.onload = () => {
  // 修正拼写错误，执行绘制
  this.compositedImage.drawImage(
    img, 
    0, 0, img.width, img.height, 
    0, 0, this.compositedCanvas.width, this.compositedCanvas.height
  );
  resolver(this);
};
// 配置图片地址，触发加载
img.src = "你的图片资源路径";

可选兼容写法 #

也可以用addEventListener绑定加载事件，写法更灵活：

img.addEventListener('load', () => {
  // 绘制逻辑
}, false);

额外注意事项 #

如果使用跨域图片资源，需要提前设置img.crossOrigin = 'Anonymous'，且资源服务端配置了跨域允许，否则会触发canvas跨域污染，导致绘制后无法导出使用。

内容的提问来源于stack exchange，提问作者原裕貴