Angular 19 + Fabric.js 6中使用FabricImage.fromURL加载图片时遇this类型错误及功能失效问题求助

看起来你在Angular 19结合Fabric.js 6开发时，卡在了图片加载的this上下文问题上，甚至换了箭头函数也没解决，我来帮你梳理下问题根源和可行的解决方案。

问题根源分析 #

首先看你遇到的TS2683错误：普通function作为回调时，内部的this指向的是Fabric.js的回调上下文，不是你的组件类实例，所以TypeScript会提示this隐式为any，而且你也访问不到组件里的this.canvas。

你提到用箭头函数也有问题，大概率是两个原因：要么是没有处理this.canvas的可选类型（它被定义为Canvas | undefined），要么是图片加载是异步操作，你在回调外部提前执行了renderAll()，导致图片还没加载完成就渲染了，看起来像是功能失效。

解决方案1：正确使用箭头函数+可选链 #

把回调改成箭头函数（确保this绑定到组件实例），同时给图片参数加上正确的类型标注，并用可选链?.处理canvas可能为undefined的情况，还要在回调内部调用renderAll()（因为图片加载是异步的，外部的renderAll()会提前执行）：

import {Component, OnInit} from '@angular/core';
import {Canvas, FabricImage, Rect} from 'fabric';

@Component({
  selector: 'app-shirt',
  imports: [],
  templateUrl: './shirt.component.html',
  styleUrl: './shirt.component.scss'
})

export class ShirtComponent implements OnInit {
  canvas: Canvas | undefined;

  ngOnInit(): void {
    this.canvas = new Canvas('canvas', {
      width: window.innerWidth,
      height: window.innerHeight
    });

    // Add a rectangle to the canvas
    const rectangle = new Rect({
      left: 100,
      top: 100,
      fill: 'blue',
      width: 200,
      height: 100,
    });
    this.canvas.add(rectangle);

    // Load an external image into the canvas (箭头函数+正确类型+可选链)
    FabricImage.fromURL('images/custom/shirts/final/1.webp', (img: FabricImage) => {
      const img1 = img.set({
        left: 300,
        top: 100,
        scaleX: 1.5,
        scaleY: 1.5,
      });
      // 用可选链避免undefined报错
      this.canvas?.add(img1);
      // 异步加载完成后再渲染
      this.canvas?.renderAll();
    });

    // 这里的renderAll()可以保留，只渲染矩形部分
    this.canvas.renderAll();
  }
}

解决方案2：使用Async/Await（更直观，避免上下文问题） #

Fabric.js 6的fromURL方法支持Promise，所以你可以把ngOnInit改成异步函数，用await来加载图片，彻底避开回调的this问题：

import {Component, OnInit} from '@angular/core';
import {Canvas, FabricImage, Rect} from 'fabric';

@Component({
  selector: 'app-shirt',
  imports: [],
  templateUrl: './shirt.component.html',
  styleUrl: './shirt.component.scss'
})

export class ShirtComponent implements OnInit {
  canvas: Canvas | undefined;

  // 改成async函数
  async ngOnInit(): Promise<void> {
    this.canvas = new Canvas('canvas', {
      width: window.innerWidth,
      height: window.innerHeight
    });

    // Add a rectangle to the canvas
    const rectangle = new Rect({
      left: 100,
      top: 100,
      fill: 'blue',
      width: 200,
      height: 100,
    });
    this.canvas.add(rectangle);

    try {
      // 用await等待图片加载完成
      const img = await FabricImage.fromURL('images/custom/shirts/final/1.webp');
      const img1 = img.set({
        left: 300,
        top: 100,
        scaleX: 1.5,
        scaleY: 1.5,
      });
      this.canvas?.add(img1);
      this.canvas?.renderAll();
    } catch (error) {
      // 捕获图片加载失败的错误
      console.error('图片加载失败:', error);
    }

    this.canvas.renderAll();
  }
}

额外注意点 #

1. 类型标注：别用img: any，换成img: FabricImage，TypeScript会帮你做类型检查，避免潜在错误。
2. 可选链：因为this.canvas被定义为Canvas | undefined，所以必须用?.来访问它的方法，否则TypeScript会报错。
3. 异步渲染：图片加载是异步操作，一定要在图片加载完成后再调用renderAll()，否则图片不会显示在画布上。

备注：内容来源于stack exchange，提问作者Mamunur Rashid