CODEWITHSUNDEEP
javascriptangulartypescriptfabricjs
Mamunur Rashid
Mamunur Rashid

Reputation: 21

FabricImage class with fromUrl is not working

import {Component, OnInit} from '@angular/core';
import {Canvas, FabricImage, Image, 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', function (img:any){
      var img1 = img.set({
        left: 300,
        top: 100,
        scaleX: 1.5,
        scaleY: 1.5,
      });
      this.canvas.add(img1);
    });

    this.canvas.renderAll()
  }
}

Angular Version: 19 Fabric.js Version: 6

Angular error

TS2683: 'this' implicitly has type 'any' because it does not have a type annotation. [plugin angular-compiler]

src/app/custom/products/shirt/shirt.component.ts:38:6:
  38 │       this.canvas.add(img1);
     ╵       ~~~~

An outer value of 'this' is shadowed by this container.

src/app/custom/products/shirt/shirt.component.ts:31:61:
  31 │ ...e.fromURL('images/custom/shirts/final/1.webp', function (img:any){

I also use arrow function in the fromUrl but same problem.

What is the actual solution for this.

Upvotes: 2

Views: 43

Answers (1)

Naren Murali
Naren Murali

Reputation: 57986

Please convert the function which has its own (this) inside this canvas does not exist, instead use an arrow function which takes the scope of the parent, where canvas exists.

    // Load an external image into the canvas
    FabricImage.fromURL('images/custom/shirts/final/1.webp', (img:any) => {
      var img1 = img.set({
        left: 300,
        top: 100,
        scaleX: 1.5,
        scaleY: 1.5,
      });
      this.canvas.add(img1);
    });

Upvotes: 1

Related Questions