Fabric.js goes directly from JSON to PNG

Question

I need to create PNG thumbnails of a saved string JSON from fabric.js file

I have a database. I save JSON data from the canvas, but I need to create a PNG thumbnail gallery from this saved JSON data.

Instead of creating a bunch of canvas on the page and doing something like this.

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

I just need to create PNG from JSON Data. Is it possible, if so, how to do it?

Answer 1

JSON data is a set of instructions for FabricJS to create a canvas. Then the canvas can be converted to an image.

For this reason, yes, you will need to create a canvas and then create an image.

An alternative method would be to create a server running NodeJS that can run FabricJS. Ultimately, you must complete the same task - create a canvas and then generate an image. But the advantage here is that, as a server process, it will save files directly to the server, and thus this task can be automated.

But setting up a server and writing a script to complete this task may require more effort than your task requires - it depends on how often you need to do this.

This post discusses how to install NodeJS and FabricJS . This will start the server and start, but then you will also need to write a server script.

Answer 2

you have another alternative way - create a generation canvas and not show it, create a hidden canvas to create your png, for example, you can create images from hidden content.

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