Home > Article > Web Front-end > How to create an object representation of an image object using FabricJS?

How to create an object representation of an image object using FabricJS?

王林forward: 2023-08-23 20:53:021358browse

如何使用 FabricJS 创建图像对象的对象表示？

In this tutorial we will learn how to create an object 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 an object To represent an Image object, we use the toObject method.

grammar

toObject(propertiesToInclude: Array): Object

parameter

propertiesToInclude - This parameter accepts an Array containing any Additional attributes we may wish to include in the output. This parameter is Optional.

Use toObjectmethod

Example

Let's look at a code example to see the output logged when using the toObject method. In this case, an object 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 toObject method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the Object 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 toObject method
      console.log(
         "Object representation of the Image instance is: ",
         image.toObject()
      );
   </script>
</body>
</html>

Add additional properties using the toObject method

Example

Let’s look at a code example to see how to use toObject method. In this example, we added a custom property called "property name". We can pass specific properties to the fabric.Image instance as shown below second argument in the options object and pass the same key to the toObject 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 toObject method to add additional properties</h2>
   <p>
      You can open console from dev tools and see that the logged output contains added property called PropertyName
   </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 PropertyName key
      // passed in options object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         PropertyName: "property",
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the toObject method
      console.log(
         "Object representation of the Image instance is: ",
         image.toObject(["PropertyName"])
      );
   </script>
</body>
</html>

in conclusion

In this tutorial, we use two examples to demonstrate how to create objects Use FabricJS to represent images.

The above is the detailed content of How to create an object representation of an image object using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

Array 对象 fabric

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to find the object scale factor of an image using FabricJS?Next article：How to find the object scale factor of an image using FabricJS?

See more

How to create an object representation of an image object using FabricJS?

grammar

parameter

Use toObjectmethod

Example

Add additional properties using the toObject method

Example

in conclusion

Related articles