KineticJS: Kinetic warning: Unable to get data URL

Question

I have two Kineticjs canvases and when trying to create an image in one canvas from the other canvas I get this error after calling toImage() on the canvas with the new image:

Kinetic warning: Unable to get data URL. Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

I am pretty sure the reason why I am getting this error is because the "toImage() method requires that the image is hosted on a web server with the same domain as the code executing it." How can I get around this warning so that I can create objects from one canvas and add them to another?

The app I am creating will run locally and will never run online so I don't have to worry about security issues. Also I read around that I can enable cross origin resource sharing but that seems a little complex and over the top since they require the setting up of a web server I think.

So is there any trick I can do to make one canvas able to create an image in another canvas for a Chrome kineticjs web app? And then being able to successfully call toImage()?

Here is how I am creating the image in the canvas:

  var folderImage = new Image();
  //folderImage.crossOrigin="anonymous"; // gives me file error if unchecked
  folderImage.onload = function() {

    var folderPic = new Kinetic.Image({
      x: 0,
      y: 0,
      image: folderImage,
      width: sideLen,
      height: sideLen
    });
    subFolderGroup.add(folderPic);
    subTextGroup.moveToTop();
    mainBody4Dynamic.draw();
  };
  folderImage.src = 'assets/images/folder.png';

And when I call toImage() in the other layer all I am calling is the layer.toImage()

markE markE · Accepted Answer · 2014-06-27T19:23:03

The browser treats the user's local drive as other-domain. That's good because you don't want your browser "getting friendly" with your banking records on your hard drive.

This means running locally with local images will taint the canvas (a CORS violation).

The simplest workaround is to install a web-server on your local machine and host the web-page plus images on a single domain. (=== automatic CORS compliance). PHP and IIS both work well on a dev machine.

Another workaround is complying with CORS restrictions by hosting your images on an internet imaging host that has configured its server to deliver images in a CORS compliant manor. Then all you have to do is add myImage.crossOrigin="anonymous". I believe dropbox.com does this--or they used to.

While in development, it sometimes works to put both your .html and your images on the desktop.

KineticJS: Kinetic warning: Unable to get data URL

1 Answers