For my Web application, I am using AngularJS on top of Node/Express. One of the routes in my application has an HTML5 canvas which I convert to an image. When I navigate to that route directly with this code, there are no problems with converting the canvas to an image:
when('/myroute/, { templateUrl: 'views/mytemplate.html', controller: 'myCtrl as vm' })
However, when I use dynamic routing (where I need to pass a unique ID to the 'myroute' page), I encounter an error while trying to convert the Canvas to an image. The error message is as follows:
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
Here is how I have defined the dynamic route in my App.js file:
when('/myroute/:ID, { templateUrl: 'views/mytemplate.html', controller: 'myCtrl as vm' })
I'm puzzled by why a dynamic route would cause this error, which seems to be CORS-related. Is it possible that this issue could be related to running on top of Node.js/Express?
Below is an example of how I convert the Canvas to an Image:
var canvasImage = document.getElementById("c");
var img = canvasImage.toDataURL("image/png");
Update 1: I attempted the following modification, but unfortunately, the same error persisted:
var canvasImage = document.getElementById("c");
var img = new Image();
img.crossOrigin = "anonymous";
img.src = canvasImage;
img = canvasImage.toDataURL("image/png");
Update 2: Upon further investigation, I discovered that the actual error is caused by my overlay, as it originates from a remote server. It's important to note that the remote server has CORS enabled. What remains perplexing is that this issue arises only in dynamic routes and not in standard ones!