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
Serialize Polyline Object into JSON in Fabric.js
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. We will use the toJSON() method to convert the canvas with Polyline object into JSON.
Syntax
toJSON(propertiesToInclude: Array): Object
Parameters
propertiesToInclude ? This parameter accepts an Array which contains any properties we might want to additionally include in the output. This parameter is optional.
Example 1: Using the toJSON Method
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>Using the toJSON method</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: "orange",
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 toJSON Method to Add Additional Properties
Let's see a code example to see how we can include additional properties by using the toJSON method. In this case, we have added a custom property called "name". We can pass the specific property to the fabric.Polyline instance as second argument in options object and pass the same key to the toJSON method.
<!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 toJSON method to add additional properties</h2>
<p> You can open console from dev tools and see that the logged output contains JSON with the added property called name </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 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: "orange",
fill: "white",
strokeWidth: 5,
name: "Polyline instance",
});
// Add it to the canvas
canvas.add(polyLine);
// Using the toJSON method
console.log(
"JSON representation of the Polyline instance is: ", polyLine.toJSON(["name"])
);
</script>
</body>
</html>
330 Views
