Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a JSON representation of an Image object using FabricJS?
In this tutorial, we are going to learn how to create a JSON representation of an Image object using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to create a JSON representation of an Image object, we use the toJSON method.
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.
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 image 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 image instance
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
});
// Add it to the canvas
canvas.add(image);
// Using the toJSON method
console.log(
"JSON representation of the Image instance is: ",
image.toJSON()
);
</script>
</body>
</html>
JSON representation of the Image instance is: {
"type": "image",
"version": "5.1.0",
"originX": "left",
"originY": "top",
"left": 110,
"top": 50,
"width": 314,
"height": 40,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeDashOffset": 0,
"strokeLineJoin": "miter",
"strokeMiterLimit": 4,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"backgroundColor": "",
"filters": [],
"src": "https://www.tutorialspoint.com/images/logo.png"
}
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.Image instance as second argument in options object and pass 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 added property called name
</p>
<canvas id="canvas"></canvas>
<img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating the image element
var imageElement = document.getElementById("img1");
// Initiate an Image object with name key
// passed in options object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
name: "Image instance",
});
// Add it to the canvas
canvas.add(image);
// Using the toJSON method
console.log(
"JSON representation of the Image instance is: ",
image.toJSON(["name"])
);
</script>
</body>
</html>
JSON representation of the Image instance is: {
"type": "image",
"version": "5.1.0",
"originX": "left",
"originY": "top",
"left": 110,
"top": 50,
"width": 314,
"height": 40,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 1,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeDashOffset": 0,
"strokeLineJoin": "miter",
"strokeDashOffset": 0,
"strokeMiterLimit": 4,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"backgroundColor": "",
"filters": [],
"src": "https://www.tutorialspoint.com/images/logo.png",
"name": "Image instance"
}
Conclusion
The toJSON method provides a convenient way to serialize FabricJS Image objects into JSON format. Use the optional parameter to include additional custom properties in the serialized output.
2K+ Views
