Ich möchte SVG über JavaScript in Bitmap-Bilder (wie JPEG, PNG usw.) konvertieren.
javascript
svg
Zain
quelle
quelle
Antworten:
So können Sie dies mit JavaScript tun:
quelle
toImage()
und auchdownload()
für ein automatisch heruntergeladenes Bild.Die jbeard4-Lösung hat wunderbar funktioniert.
Ich verwende Raphael SketchPad , um eine SVG zu erstellen. Link zu den Dateien in Schritt 1.
Für eine Schaltfläche Speichern (ID von svg ist "editor", ID von canvas ist "canvas"):
quelle
<svg>...</svg
aber die Funktion jquery html () fügt kein svg-Tag hinzu, daher funktioniert dieser Code für mich, aber ich musste das canvg live bearbeitencanvg('canvas', '<svg>'+$("#editor").html()+'</svg>');
$(selector).html()
das übergeordnete Element Ihres svg- Elements aufrufen , wird es funktionierenhtml()
für Wrapper verwenden oder das übergeordnetesvg
Tag manuell erstellen müssen - möglicherweise sogar Attribute, die Sie bei diesem Hack auslassen. Durch die einfache Verwendung erhalten$(svg_elem)[0].outerHTML
Sie die vollständige Quelle des SVG und seines Inhalts.Dies scheint in den meisten Browsern zu funktionieren:
quelle
.msToBlob()
Die Lösung zum Konvertieren von SVG in Blob-URL und Blob-URL in PNG-Bild
quelle
Ich habe diese ES6-Klasse geschrieben, die den Job macht.
So verwenden Sie es
Wenn Sie eine Vanille-JavaScript-Version wünschen, können Sie zur Babel-Website gehen und den Code dort transpilieren.
quelle
Hier ist eine serverseitige Lösung, die auf PhantomJS basiert. Mit JSONP können Sie den Image-Service domänenübergreifend aufrufen:
https://github.com/vidalab/banquo-server
Beispielsweise:
http: // [host] /api/https%3A%2F%2Fvida.io%2Fdocuments%2FWgBMc4zDWF7YpqXGR/viewport_width=980&viewport_height=900&delay=5000&selector=%23canvas
Dann können Sie das Bild mit dem img-Tag anzeigen:
Es funktioniert browserübergreifend.
quelle
Ändern Sie
svg
, um Ihrem Element zu entsprechenquelle
Uncaught TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'.
Svg
topng
kann abhängig von den Bedingungen konvertiert werden:svg
im Format SVG (String) Pfade ist :new Path2D()
undsvg
als Parameter festlegencanvas.toDataURL()
alssrc
.Beispiel:
Beachten Sie, dass dies in Edge
Path2D
nichtie
und teilweise in Edge unterstützt wird. Polyfill löst Folgendes: https://github.com/nilzona/path2d-polyfillsvg
Blob und zeichnen Sie auf Leinwand mit.drawImage()
:Schöne Beschreibung: http://ramblings.mcpher.com/Home/excelquirks/gassnips/svgtopng
Beachten Sie, dass Sie in dh auf der Bühne von canvas.toDataURL () eine Ausnahme erhalten; Dies liegt daran, dass der IE zu hohe Sicherheitsbeschränkungen aufweist und die Leinwand nach dem Zeichnen des Bilds als schreibgeschützt behandelt. Alle anderen Browser schränken nur ein, wenn das Bild einen Kreuzursprung aufweist.
canvg
JavaScript-Bibliothek. Es ist eine separate Bibliothek, hat aber nützliche Funktionen.Mögen:
quelle
Ich habe kürzlich einige Bildverfolgungsbibliotheken für JavaScript entdeckt, die tatsächlich eine akzeptable Annäherung an die Bitmap erstellen können, sowohl in Bezug auf Größe als auch Qualität. Ich entwickle diese JavaScript-Bibliothek und CLI:
https://www.npmjs.com/package/svg-png-converter
Dies bietet eine einheitliche API für alle, unterstützt Browser und Knoten, unabhängig vom DOM, und ein Befehlszeilentool.
Zum Konvertieren von Logos / Cartoons / ähnlichen Bildern macht es hervorragende Arbeit. Für Fotos / Realismus sind einige Anpassungen erforderlich, da die Ausgabegröße stark ansteigen kann.
Es gibt einen Spielplatz, obwohl ich gerade an einem besseren arbeite, der einfacher zu bedienen ist, da weitere Funktionen hinzugefügt wurden:
https://cancerberosgx.github.io/demos/svg-png-converter/playground/#
quelle