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 hat img.crossOrigin = ‘Anonymous’ Safari nicht geholfen, sein Problem mit (vermutlich) dem origin-clean -Zustand des Canvas zu überwinden.
Ich weiß nicht, was für Canvas / SVG-Horror in anderen Browsern liegen könnte, 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 nicht in den Canvas-Bereich geschrieben werden kann, aber dieser Tag könnte teilweise für die Sicherheitsausnahme von Safari verantwortlich sein (ein schmutziger Canvas). Sobald canvas.toDataURL von Safari gefunden wird, wird der Sicherheitsfehler ausgegeben. In der Tat scheint es, dass sogar die svg-todataurl.js Plugin - offenbar geschrieben, um dies zu tun - kann nicht dasselbe grundlegende Problem in Safari zu überwinden.
Interessanterweise tritt dieses Problem auch in allen IE-Versionen bis Edge auf (nicht IE?); In Edge funktioniert die Funktion canvas.toDataURL . Hmm.
UPDATE 2
@ Kaiidos Vorschlag: Verwenden Sie 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.
UPDATE 3
html2canvas: NEGATORISCH. Versuchen Sie, das Testbild auf der Beispielseite mit Safari herunterzuladen. Das gleiche Problem, also keine Lösung.