Fabric.js che vanno direttamente da JSON in PNG

Question

Ho bisogno di creare PNG miniature delle JSON stringata salvato da fabric.js

Ho un database che sto salvando i dati JSON dalla tela per, ma ho bisogno di creare una galleria di miniature PNG da questi dati JSON salvati.

Piuttosto che creare un mucchio di tele sulla pagina e fare qualcosa del genere.

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

Ho bisogno di creare direttamente PNG dai dati JSON. È possibile, se sì, come faccio?

Answer 1

I dati JSON sono un set di istruzioni per FabricJS da utilizzare per creare una tela. Una tela può quindi essere convertita in un'immagine.

Per questo motivo, sì, sarà necessario creare la tela e quindi creare l'immagine.

Un metodo alternativo potrebbe essere quello di creare un server su cui è in esecuzione NodeJS, che può eseguire FabricJS. Alla fine avresti eseguito lo stesso compito lì: crea una tela e poi genera l'immagine. Ma il vantaggio qui è che essendo un processo del server salverebbe i file direttamente sul server e quindi questa attività potrebbe essere automatizzata.

Tuttavia, impostare il server e scrivere lo script per eseguire questa operazione potrebbe richiedere uno sforzo maggiore di quello richiesto dall'operazione, a seconda della frequenza con cui è necessario eseguire questa operazione.

This post discusses how to install NodeJS and FabricJS. Ciò renderà il server attivo e funzionante, ma dovrai anche scrivere lo script del server.

Answer 2

si ha un altro modo alternativo è quello di creare una tela di generazione e dargli una visualizzazione nulla, creare una tela nascosta per generare il tuo png, come quello che si può avere generato immagini da una tela di contenuti nascosti.

<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>