Rendern von SVG zu PNG auf dem server mit reinem JavaScript

Der Titel sagt es. Ich kenne Imagemagick kann das tun, aber lassen Sie uns annehmen, ich bin auf einem cloud-server, der nur mir erlauben, JavaScript (HustennodesterHusten). Das ist nicht eine schlechte Sache, wirklich.

Kürzlich hörte ich, dass es h.264 Renderer in javascript, also png ist nicht zu weit hergeholt?

  • nicht sicher, ob es hilft, aber Leinwand generieren kann PNGs. Nicht sicher, wie Sie Sie schön SVG und Canvas zusammen spielen, obwohl.
  • Man könnte ein Projekt wie CanVG zum Rendern von SVG-Grafiken auf einer Leinwand ist, und dann umwandeln in PNG aus.
  • Ich würde auch das svg in die Leinwand direkt, aber ich fürchte, das ist viel zu ineffizient.
InformationsquelleAutor Lanbo | 2011-10-28
  1. 11

    PNG renderer ist nicht weit hergeholt, in der Tat gibt es Sie bereits: http://devongovett.github.com/png.js/

    Das problem hier ist, dass Sie brauchen eine "gefälschte canvas" - Implementierung, die nicht alles zeichnen, baut einfach ein pixel-array, das könnte dann gespeichert werden, um ein PNG. Es gibt nichts vergleichbares, weil es ziemlich nutzlos, außer für diesen Fall...

    D. H.: svg -> bitmap-renderer (gefälschte canvas) -> rgb-array -> png-Datei

    Einige hosting-Anbieter wird Ihnen erlauben, zu erklären, system-level-Abhängigkeiten, oder haben einige Vorgaben zur Verfügung. gm würde funktionieren gut für diesen Zweck:

    gm = require('gm')

gm('image.svg').write('image.png', function(err){
  if (!err) console.log('image converted.')
})

    Kann man anscheinend installieren Sie imagemagick/graphicsmagick auf eine http://no.de Maschine, und dotcloud hat auch IM zur Verfügung. Frag die Jungs bei nodester, ist es sehr wahrscheinlich, dass Sie eine Grafik-Bibliothek zur Verfügung.

    • Es gibt gefälschte canvas-Module für node.
    • die verfügbaren canvas-Bibliotheken sind nicht "fake" in diesem Sinne. Sie alle verlassen sich auf ein externes Grafik-Bibliothek zum Rendern der canvas. Was ich meine ist, dass man einen 2d-renderer geschrieben in JS.
    InformationsquelleAutor Ricardo Tomasi
  2. 1

    Leider alle advanced rendering in JavaScript zur Verfügung stehen, ist über die browser-Implementierungen von HTML5-canvas. NodeJS verfügt nicht über diese features.

    Gibt es Erweiterungen für NodeJS, mit denen Sie die Bilder zu Bearbeiten, aber Sie können Sie nur verwenden, wenn Ihre host installiert.

    • Würde es mir eine gute Idee zu senden, die svg auf dem client, verwenden Sie Ihre <canvas> um eine png-Datei, und verwenden Sie dann die png-Datei für das Spiel antimations?
    • Wenn der client kann bereits Rendern von SVG-Grafiken und hat ein canvas-element, warum würden Sie konvertieren es in ein PNG? Es würde helfen zu wissen, was Sie zu tun versuchen. Machen server Anrufe für Spiel-Animationen-sounds wirklich langsam.
    • Ich möchte, um dies zu tun: Meine Spieler können einen Charakter erstellen von SVG-Prefabs. Dann, das war meine Idee, wenn der Spieler fertig ist, wird der server die parameter, zusammenstellen der Vorlagen und verwandeln Sie es in ein voll PNG, die in der Datenbank gecached. Ich möchte dies tun, weil ein Pixel-Bild zu zeichnen, schneller als der SVGs. Ich erwarte, dass bis zu 20 verschiedene von Ihnen auf ein Spieler <canvas> auf einmal.
    • wenn Sie nur wollen, um die Leistung zu optimieren, die Idee in Ihrem ersten Kommentar würde funktionieren: verwenden Sie fabric.js oder etwas ähnliches zum Rendern der SVG in canvas, speichern Sie die bitmap-Daten (im Speicher, keine Notwendigkeit für ein png) und verwenden Sie es für die Animationen. Werden Sie sicher, testen Sie es vorher, manche Dinge sind schneller in SVG, speziell auf iOS. Dieser Artikel sollte auch Sie interessieren: html5rocks.com/en/tutorials/canvas/performance
    InformationsquelleAutor Brian Nickel
  3. -3

    Gibt es svg2png, was mit einem headless browser zum Rendern von svgs als png.

    https://github.com/domenic/svg2png

    https://www.npmjs.com/package/svg2png

    • Diejenigen erforderlich, PhantomJs, brechen die javascript-einzige Voraussetzung
    InformationsquelleAutor Max Girkens
Schreibe einen Kommentar