Home > Article > Web Front-end > How to create a JSON representation of an Image object using FabricJS?
In this tutorial we will learn how to create a JSON representation of an image Objects using FabricJS. We can create an Image object by creating an instance fabric.image. Since it is one of the basic elements of FabricJS, we can also easily Customize it by applying properties such as angle, opacity, and more. To create JSON For representation of Image objects, we use the toJSON method.
toJSON(propertiesToInclude: Array): Object
propertiesToInclude - This parameter accepts an Array containing any Additional attributes we may wish to include in the output. This parameter is Optional.
Let's look at a code example to see the output logged when using the toJSON method. exist In this case, a JSON representation of the image instance is 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>
Let’s look at a code example to see how to use toJSON method. In this example, we added a custom property called "name". we can Pass specific properties to the fabric.Image instance as the second parameter 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 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>
In this tutorial, we use two examples to demonstrate how to create JSON Use FabricJS to represent Image objects.
The above is the detailed content of How to create a JSON representation of an Image object using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!