c# - Canvas toDataURI() on chrome security issue

I am having an issue with Canvas on chrome. I know that this is mentioned a lot but i was not able to find a solution that suites me.

Basically, i am designing a website that does the following steps:
- Loads an SVG image template from the hosting server into an object.
- Manipulates that SVG (Coloring, hiding and showing layers etc...)
- Then send the manipulated version to the server to be inserted into a pdf document and emailed.

My issue is with the last step. The approach that i was using involves:
- Fetching the content document of the SVG and serializing its XML.

 var s = new XMLSerializer();
 svg = document.getElementById('theSVG').contentDocument;
 var xmlTest = s.serializeToString(svg);

• Defining a new image with an onLoad function and applying the src to it:

  
  
  
  

  drawnImage.src = 'data:image/svg+xml,' + escape(xmlTest);




• Creating a canvas element and drawing that image into it:

  
  
  

  var canvas = document.createElement('canvas');
  var cont = canvas.getContext('2d');
  cont.drawImage(drawnImage, 0, 0, canvas.width, canvas.height);




• The last step is extracting the dataURI from the canvas element as such:

var ImageDataURl = canvas.toDataURL();

After that, the data (base64) is sent to the server, coonverted to bitmap and saved as a jpeg image on the server disk then inserted as a part of a big pdf document.

All was going well until i tested it out on chrome, and i ran through the security error that states:

Uncaught SecurityError: An attempt was made to break through the
security policy of the user agent

As i read about this error, i knew that this is a chrome security issue for cross domain images and blah blah. What i would like to know is the following:
- Is creating a new canvas and loading the image into it on the user's browser treated as a file from another domain?
- And is there a workaround for this even if it is server side (I am using C#) i do not mind. I tried uploading the SVG XML and tried convert it to base64 string but with no luck.

Any help would be appreciated.

Answer

I solved this issue by using fabric js. Great library. The code is as follows:

var a = document.getElementById("theSVG"); //This is the