FabricJS – How to exclude Line object from being saved while using JSON.stringify()?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn how to exclude Line object from being saved while using JSON.stringify() in FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. Serialization is used in order to export canvas contents. In order to achieve this we use toObject() and toJSON() methods. The excludeFromExport property allows us to include or omit the object when being exported.

Syntax

 new fabric.Line(points: Array, { excludeFromExport : Boolean }: Object)

Parameters

points − This parameter accepts an Array of points which determines the (x1, y1) and (x2, y2) values, those being the x- and y-axis coordinates of the start and end of the line respectively.
options (optional) − This parameter is an Object which provides additional customizations to our line object. Using this parameter origin, stroke width and a lot of other properties can be changed related to the object of which excludeFromExport is a property.

Options Keys

excludeFromExport − This property accepts a Boolean value. On passing a true value, the object is not exported as object or JSON.

Logged output when excludeFromExport property is not used

Example

Let’s see a code example to see the logged output when the excludeFromExport property is not used. In this case, we can see in our browser console (available in dev tools) the object has not been excluded from export and begins with “type”:“line” hence indicating about the line object.


<!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>Logged output when excludeFromExport property is not used</h2>
   <p>
      You can open dev tools and see in console that the serialized line object is being logged
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using JSON.stringify method to serialize the canvas
      console.log(JSON.stringify(canvas));
   </script>
</body>
</html>

Logged output when excludeFromExport property is used

Example

In this example, we will see how by using the excludeFromExport property and passing it a true value, we can omit the inclusion of the serialized line object.


<!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> Logged output when excludeFromExport property is used </h2>
   <p>
      You can inspect from console in dev tools and see that the serialized line object is not being console logged
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         excludeFromExport: true,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using JSON.stringify method to serialize the canvas
      console.log(JSON.stringify(canvas));
   </script>
</body>
</html>

Rahul Gurung

Updated on: 21-Oct-2022

215 Views

Kickstart Your Career

Get certified by completing the course

Get Started