Fabric.js direkt von JSON zu PNG gehen

Question

Ich brauche PNG Thumbnails der gespeicherten Zeichenfolge JSON von fabric.js

Ich habe eine Datenbank Ich spare die JSON-Daten aus der Leinwand zu schaffen, aber ich brauche zu erstellen eine PNG-Thumbnail-Galerie aus diesen gespeicherten JSON-Daten.

Anstatt eine Reihe von Canvases auf der Seite zu erstellen und so etwas zu tun.

canvas.loadFromJSON(JSONDATA); 
thumbImage = canvas.toDataURL('png'); 
$(this).attr('src', thumbImage); 

Ich muss einfach PNGs direkt aus den JSON-Daten erstellen. Ist das möglich, wenn ja, wie mache ich das?

Answer 1

Bei den JSON-Daten handelt es sich um Anweisungen, die FabricJS zum Erstellen einer Zeichenfläche verwenden soll. Ein Canvas kann dann in ein Bild konvertiert werden.

Aus diesem Grund, ja, müssen Sie die Leinwand erstellen und dann das Bild erstellen.

Eine alternative Methode wäre, einen Server mit NodeJS zu erstellen, auf dem FabricJS ausgeführt werden kann. Letztendlich würden Sie die gleiche Aufgabe dort ausführen - erstellen Sie eine Leinwand und generieren Sie dann das Bild. Aber der Vorteil ist, dass es sich um einen Serverprozess handelt, der die Dateien direkt auf dem Server speichert und diese Aufgabe somit automatisiert werden kann.

Das Einrichten des Servers und das Schreiben des Skripts zur Ausführung dieser Aufgabe kann jedoch mehr Aufwand erfordern als Ihre Aufgabe erfordert - je nachdem, wie oft Sie dies tun müssen.

This post discusses how to install NodeJS and FabricJS. Das wird den Server zum Laufen bringen, aber Sie müssen dann auch das Server-Skript schreiben.

Answer 2

Sie haben eine andere alternative Möglichkeit ist es, ein Generations-Canvas zu erstellen und es keine anzeigen zu lassen, erstellen Sie ein verborgenes Canvas, um Ihre PNGs zu generieren, so können Sie Bilder von einem versteckten Inhalts-Canvas generiert haben.

<canvas id='c' width='150' heigh='150' style='display: none;'><canvas> 

<script> 
    var canvas = new fabric.Canvas('c'); 
    canvas.loadFromJSON(json); 
    canvas.toDataURL('png'); 
</script>