SVG tained canvas Erreur de sécurité IE toDataURL

J'ai une directive dans JS angulaire qui permet d'exporter des SVG vers un PNG. Cela fonctionne bien dans d'autres navigateurs, mais dans IE, j'ai une erreur de sécurité. J'ai essayé toutes sortes de choses, mais cela ne semble pas fonctionner. J'ai lu quelque part que si je bascule 64 l'encode, alors cela fonctionnerait, mais ce n'est pas le cas.

Le code que j'ai pour dessiner le SVG sur le canevas est le suivant:

// Private function for drawing our images var drawImage = function (canvas, ctx, svgContainer) { // Defer our promise var deferred = $q.defer(); // Remove hidden layers removeHidden(angular.element(clone)); // Create our data var clone = angular.element(svgContainer[0].cloneNode(true)), child = clone.children()[0]; // Remove hidden layers removeHidden(angular.element(clone)); var s = new XMLSerializer(), t = s.serializeToString(child), base64 = 'data:image/svg+xml;base64,' + window.btoa(t); console.log(base64); var img = new Image(); // When the image has loaded img.onload = function () { // Create our dimensions var viewBox = child.getAttribute('viewBox').split(' '); console.log(viewBox); var dimensions = { width: viewBox[2], height: viewBox[3] }; console.log(img.width); // Get our location getNextLocation(canvas.width, canvas.height, dimensions); // Draw our image using the context ctx.drawImage(img, 0, 0, dimensions.width / 2, dimensions.height, location.x, location.y, location.width, location.height); // Resolve our promise deferred.resolve(location); }; // Set the URL of the image img.src = base64; // Return our promise return deferred.promise; }; 

Avant cela, je créais un blob, mais cela provoquait également l'erreur de sécurité. Mon principal bit de code, est-ce un peu ici?

 // Public function to generate the image self.generateImage = function (onSuccess) { // Reset our location location = null; counter = 0; // Get our SVG var target = document.getElementById(self.options.targets.containerId), svgContainers = angular.element(target.getElementsByClassName(self.options.targets.svgContainerClassName)), itemCount = svgContainers.length; // Get our context var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); // Set our canvas height and width setCanvasDimensions(canvas, itemCount); // Create our array of promises var promises = []; // Draw our header and footer drawHeader(canvas, ctx); //// For each container //for (var i = 0; i < itemCount; i++) { // // Get our elements // var svgContainer = svgContainers[i]; // // Draw our image and push our promise to the array // promises.push(draw(canvas, ctx, svgContainer)); //} promises.push(draw(canvas, ctx, svgContainers[0])); // Finally add our footer to our promises array promises.push(drawFooter(canvas, ctx)); // When all promises have resolve $q.all(promises).then(function () { console.log('all promises completed'); // Get our URL as a base64 string var dataURL = canvas.toDataURL("image/png"); console.log('we have the image'); // Create our model var model = { teamName: self.options.team.name, sport: self.options.team.sport, data: dataURL }; // Create our preview self.create(model).then(function (response) { console.log('saved to the database'); // Invoke our success callback onSuccess(response); }); }) }; 

Comme vous pouvez le voir, je boucle chaque conteneur svg et dessine le SVG pour chacun d'eux. J'ai commenté cela dans ce code et je dessine la première image. La directive console.log après canvas.toDATEURL ne fait jamais appel et je reçois une erreur de sécurité.

• Accès à une API Google Maps sur une base de données avec Angular
• Le contrôleur angulaire est en cours d'exécution avant la fin de l'usine
• Vérifiez si la valeur de la clé existe et si vous ne appuyez pas sur la touche avec la valeur dans javascript
• Pourquoi le modèle ng n'est pas défini?
• Comment modifier la couleur d'arrière-plan pour un <tr> spécifique dans AngularJS en utilisant ng-repeat

Le SVG est en ligne. D'après ce que j'ai lu, le problème pourrait être dû à la déclaration de xlns, mais l'enlever me donne encore la question:

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 259.5 131" enable-background="new 0 0 259.5 131" xml:space="preserve"> 

Est-ce que quelqu'un sait comment résoudre ce problème?

• AngularJs $ http post avant action hook
• Composants de matériaux angulaires dans Ng-Sweet-Alert-2
• Image ne s'affiche pas lors de la génération de pdf en angularjs à l'aide de pdfmake
• Vue par défaut UI-Router à l'intérieur de div
• Utiliser une promesse pour récupérer des données à l'intérieur de la directive angulaire