Canvas JSON to SVG using Node
Following is the steps / procedure to convert fabric json to SVG / PDF using NODE js script without using browser.
-
Add the following node module packages in package.json
npm install canvas@1.6.13, fabric@2.6, jsdom@9.12.0 -
Load the node modules in js
var fs = require('fs'),
fabric = require('fabric').fabric,
out = fs.createWriteStream(__dirname + '/output.png');
- Read fabric js canvas json from local directory
let jsonstr = fs.readFileSync(__dirname + '/templates/8.json', 'utf-8');
let json = JSON.parse(jsonstr);
- Create static canvas
var canvas = new fabric.StaticCanvas(null, { width: wh.width, height: wh.height });
- Load the json in canvas and convert it as svg.
canvas.loadFromJSON(json, function() {
//first render
canvas.renderAll.bind(canvas);
//save the canvas as SVG in server
var svgoutput = canvas.toSVG();
fs.writeFile("output.svg", svgoutput, function(err) {
if (err) throw err;
});
});
Other features that can be added is SVG to PDF using svg-to-pdfkit module.
Links of json,
http://kpomservices.com/canvas2svg/templates/8.json
converted svg, png, pdf
http://kpomservices.com/canvas2svg/output.svg
http://kpomservices.com/canvas2svg/output.pdf
http://kpomservices.com/canvas2svg/output.png
This is a great explanation of how to convert Canvas JSON data to SVG using Node.js! Read the JSON data from a local file and parse it into a JavaScript object.
Instantiate a fabric.StaticCanvas object with desired width and height.
https://www.ny-stateofhealth.com/
Thanks for the reply.