Konvajs - Layer.toImage() return null instead of the image data

Question

I am currently working on a layer of the stage that gets exported to a png file on a button event, it is working, but just until I added a Logo as an Image class to the layer.

Without adding the Image element:

layer.toImage({
   callback: function(img) { //img = "base_64 image data".
     console.log(img.src);
   }
});

With the Image element:

layer.toImage({
   callback: function(img) { //img = null
     console.log(img.src); // Error: src of null.
   }
});

Here, the app crashes and I can´t find the problem. I tried to add and remove the image and then export the image, works perfectly. I only have this problem when an image element is drawn in the Layer.

Any ideas why this is happening?

Update

Code example:

var myLayer= this.refs.layer;
myLayer.children.forEach(element => {
  if (element.attrs.elementType === "text"){
    if (element.isVisible()){
      element.visible(false);
      hiddenElements.push(element.id);
    }
  }
});

myLayer.toImage({
  callback: function(img) { //If image is drawn to the leyer img = null
    *Ajax function here*    //Else img has base64 info of the leyer
  },
  mimeType: "image/png"
});

I then set all hiddenElements back to true and the stage gets back to its initial state.

Answer 1

For anyone else coming to this and wondering about 'CORS', Wikipedia introduces CORS as

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the first resource was served. A web page may freely embed cross-origin images, stylesheets, scripts, iframes, and videos. Certain "cross-domain" requests, notably Ajax requests, are forbidden by default by the same-origin security policy.

What this means in practice is that a canvas cannot process an image from another (non-CORS enabled) domain into a blob. If it tries the browser will force the 'Tainted canvas' error which you can observe in the browser console.

There is a pithy explanation of why this is so in this reply by Mike C to this SO question, which I will copy here for brevity.

Imagine you have a bank statement open, which only you can view because of some kind of authentication header, but then a 3rd party creates a canvas element and inserts that image into the canvas. They could then convert that to a blob and send it back to home base if the canvas wasn't marked as "tainted"

It turns out that the benefits of canvas are also potentially pitfalls. Or as Yoda might say 'Powerful you have become, the dark side I sense in you.'