Replace image in canvas coming blank

[albert-hoffman]

Version

3.1.0

Information about environment

browser
Chrome, Safari, Firefox

Steps to reproduce

const activeCanvas = canvas[0];
const selectedObj = activeCanvas.getActiveObject();
selectedObj.setSrc(imagepath, (img) => {
   selectedObj.scale(0.50);
   activeCanvas.setActiveObject(img);
   activeCanvas.renderAll();
   activeCanvas.calcOffset();
});

This is my code to just simply replace an image on canvas with existing image component.
But the thing is that after replace image is coming blank like this.

when I click anywhere on canvas then the image is rendering properly.
I am using it with Angular 8

Expected Behavior

Image should render

Actual Behavior

image is coming blank.

[asturur]

Please try to reproduce it on a working fiddle or codepen.
Also try to use a newer version compared to 3.1.0 so that we can better unsderstand if is a current bug or an old one already fixed.

[albert-hoffman]

@asturur I fixed that issue my own, thanks for your support here.

[asturur]

glad to hear that!

[dkirchhof]

Hello,
could you tell me, how you solved the problem?

My only solution now is to put the renderAll in a setTimeout (i'm using v. 4.0.0-beta.12)

  updateElementSrc(element, src) {
    const { width, height } = element;

    return new Promise(resolve => {
      element.setSrc(src, () => {
        element.set({ width, height, dirty: true });

        setTimeout(() => {
          editor.canvas.renderAll();
          resolve();
        }, 10);
      });
    });
  },

The callback runs after the image was loaded (i can inspect it in the network panel), but it depends on my internet connection, how long i have to set the timeout. So there is obviously something wrong.

(Edit: It has something to do with the crossOrigin option i set to the image element - s. #6397)

[albert-hoffman]

@dkirchhof : Just add }, {crossOrigin: 'annonymous'});, and there you go. it is aolved.

element.setSrc(src, () => {
        element.set({ width, height, dirty: true });

        setTimeout(() => {
          editor.canvas.renderAll();
          resolve();
        }, 10);
      }, {crossOrigin: 'annonymous'});