Frage SVG> PNG von canvas.toDataURL löst den Sicherheitsfehler DOM exception 18 in Safari 9.x aus


Ich erstelle eine dynamisch generierte SVG aus HTML-Textinhalt. Es funktioniert gut in Chrome, aber Safari gibt immer einen Fehler aus, wenn die SVG-Daten zum Herunterladen in PNG konvertiert werden.

Was mich verblüfft hat, ist, dass es kein Cross-Browser-Zeug gibt; Dies alles wird aus einer einzigen Quelle erzeugt / heruntergeladen. Trotzdem, einschließlich img.crossOrigin = ‘Anonymous’ hat Safari nicht geholfen, sein Problem mit (vermutlich) den Canvas's zu lösen origin-clean Zustand.

function makeImage(canvas, pHeight, content) {

var ctx = canvas.getContext('2d');
var svgElementCode = '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="600">' + 
    '<foreignObject width="100%" height="100%">' + 
    '<div xmlns="http://www.w3.org/1999/xhtml" style="height:' + (pHeight - 100) + 'px; font-size: 20px;">' + 
    content +  
    '</div>' + 
    '</foreignObject>' + 
    '</svg>';

var data = 'data:image/svg+xml,' + encodeURIComponent(svgElementCode);
var img = new Image();
img.crossOrigin = 'Anonymous';
img.src = data;

img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var canvasdata = canvas.toDataURL("image/png");
    var pngimg = '<img src="'+canvasdata+'">';
    $("#shareImage").append($('<a href="' + canvasdata + '" title="file.svg">' + pngimg + '</a>'));      
    };

}

Ich weiß nicht, was Canvas / SVG-Horror in anderen Browsern liegt, aber im Moment würde ich gerne sehen, dass dies in Safari funktioniert. Irgendwelche Ideen?

AKTUALISIEREN

Es scheint, dass mit dem foreignObject Tag das SVG kann nicht in Canvas geschrieben werden, noch dieses Tag Macht teilweise für die Sicherheitsausnahme von Safari (eine schmutzige Arbeitsfläche) verantwortlich sein. Sobald canvas.toDataURL Wird von Safari erkannt, wird der Sicherheitsfehler ausgegeben. In der Tat scheint es, dass sogar die svg-todaturl.js Plugin - anscheinend geschrieben, um nur dies tun - kann nicht dasselbe grundlegende Problem in Safari überwinden.

Interessanterweise tritt dieses Problem auch in allen Versionen von IE bis Edge auf (nicht IE?); in Rand der canvas.toDataURL Funktion funktioniert. Hmm.

UPDATE 2

@ Kaiidos Vorschlag: Verwenden html2canvas. Wenn Sie keine Cross-Origin-Sachen machen, ist dies alles, was Sie für das Rendern von DOM-Elementen als Pixel benötigen. Danke Kaiido.

AKTUALISIEREN 3

html2canvas: NEGATORISCH. Versuchen Sie, das Testbild herunterzuladen generiert auf ihrer Beispielseite, mit Safari. Das gleiche Problem, also keine Lösung.


9
2017-11-28 14:10


Ursprung


Antworten: