angular - Fabricjs canvas - image.fromUrl doesn't appear on canvas (only after a refresh)

Question

I have a child-component that creates a new fabric static canvas and call a dedicated function to set an image and text on it. The flow:

setCanvas -> updateCanvas -> imageBackgroundCanvas

The component code:

private async setCanvas() {

      this.canvasFabric = new fabric.StaticCanvas(this.scene._id, { selection: false, skipTargetFind: false });
      this.canvasFabric.setWidth(500);
      this.canvasFabric.setHeight(500);
      await this.updateCanvas();
}

private updateCanvas() {

    return new Promise((resolve) => {
          imageBackgroundToCanvasPromise = this.canvasService.imageBackgroundCanvas(this.scene, this.canvasFabric);

      imageBackgroundToCanvasPromise.then((stage) => {
        this.canvasFabric.renderAll();
        resolve();
      });

    });
}

The service file (adding the image):

  public imageBackgroundCanvas(scene, fabricCanvas) {

    fabricCanvas.clear();

    return new Promise((resolve) => {
      fabric.Image.fromURL(scene.background_url,async (bg) => {
        fabricCanvas.renderAll.bind(fabricCanvas);

        bg.set({selectable:false, hasControls: false, hasRotatingPoint: false});

        // Scale original image to canvas dimensions
        let imageHeight;
        let imageWidth;

        imageWidth = 500;
        imageHeight = imageWidth * scene.background_position.ratio;
        bg.scaleToWidth(imageWidth);
        bg.scaleToHeight(imageHeight);
    
        // Center and add to canvas
        fabricCanvas.centerObject(bg);
        fabricCanvas.add(bg);

        // Creating text & rect elements
        // ... ....

        // Add Elements to Canvas
        fabricCanvas.add(textRectEl);
        fabricCanvas.add(textEl);
        fabricCanvas.requestRenderAll();
 
        resolve({
          textEl: textEl,
          textRectEl: textRectEl,
          fabricCanvas: fabricCanvas,
          bg: bg
        })
        // --------------- End callback of image ---------------------

      }, {});

    });

  }

Notes:

• I have several fabric canvases on the same page.
• The scene.background_url is an external url (i host the images on my S3).

Problem:

Sometimes some of the canvases left with a white blank background and only the text and the rect appear (textEl, textRectEl). And after a refresh, the image appear.

My opinion/Question:

As far as I know, the callback of fromUrl runs after the resource is loaded. Since the text & rect appear on the canvas - I can know for sure that the callback function runs. -> So I must conclude that the image is being loaded as well (right?)

So, or the image is being loaded but it's corrupted from some reason or the rendering "misses" the "add(bg)" somehow.

Answer 1

等待大神答复