Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
De-serialize Polyline Object from JSON in FabricJS
A polyline object can be characterised by a set of connected straight-line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity, etc.
Serialization means converting the canvas into savable data which can be converted back into the canvas later. This data can be an object or JSON so that it can be stored on servers.
De-serialization is the process of converting back JSON or object to the canvas. We will use the loadfromJSON() method to de-serialize the canvas with Polyline object from JSON.
Syntax
loadfromJSON(JSON: String|Object, callback: function, reviver: function): fabric.Canvas
Parameters
JSON ? This parameter accepts a String or Object which contains the serialized form of Canvas data.
callback ? This parameter accepts a function which is invoked when JSON is parsed and corresponding objects are initialized.
reviver ? This parameter accepts a function which is used for further parsing JSON elements, called after each fabric object is created.
Example 1: Creating the JSON serialized form of a Canvas
Let's see a code example to see the logged output when the toJSON method is used. In this case, a JSON representation of the Polyline instance will be returned.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Creating the JSON serialized form of a Canvas</h2>
<p> You can open console from dev tools and see that the logged output contains the JSON representation of the Polyline instance </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Polyline instance
var polyLine = new fabric.Polyline([
{ x: 500, y: 20 },
{ x: 550, y: 60 },
{ x: 550, y: 200 },
{ x: 350, y: 100 },
{ x: 350, y: 60 },
], {
stroke: "skyblue",
fill: "white",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(polyLine);
// Using the toJSON method
console.log("JSON representation of the Polyline instance is: ", polyLine.toJSON());
</script>
</body>
</html>
Example 2: Using loadfromJSON() method to covert JSON back to Canvas
Let's see a code example to see how we can covert an Canvas to JSON and further read it back using loadfromJSON(). We will use toJSON() method to convert a Canvas to JSON.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Using loadfromJSON() method to convert JSON back to Canvas</h2>
<p> You can see the currently rendered canvas with Polyline object is coming from a JSON </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas();
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Polyline object with name key
// passed in options object
var polyLine = new fabric.Polyline([
{ x: 500, y: 20 },
{ x: 550, y: 60 },
{ x: 550, y: 200 },
{ x: 350, y: 100 },
{ x: 350, y: 60 },
], {
stroke: "skyblue",
fill: "white",
strokeWidth: 5,
});
// Add it to the canvas instance
canvas.add(polyLine);
// Using the toJSON method to convert canvas to json
var jsonForm = canvas.toJSON();
// Create a new canvas instance
var newCanvas = new fabric.Canvas("canvas");
newCanvas.setWidth(document.body.scrollWidth);
newCanvas.setHeight(250);
// load the JSON as a Canvas using loadFromJSON()
newCanvas.loadFromJSON(jsonForm);
</script>
</body>
</html>
582 Views
