search

Home >Web Front-end >JS Tutorial >FabricJS - How to create an instance of fabric.Image from its object representation?

FabricJS - How to create an instance of fabric.Image from its object representation?

WBOY
WBOYforward
2023-08-25 21:17:14820browse

FabricJS – 如何从其对象表示创建fabric.Image 的实例？

In this tutorial we will show you how to create an instance of Fabric.Image Obtained from its object representation using FabricJS. We can create an Image object by Create an instance of 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, etc. To create an instance of fabric.Image from its object representation, we use fromObject method.

grammar

fromObject(object: Object, callback: function)

parameter

  • object - This parameter accepts an object that represents the object to be obtained from The image will be created.

  • callback - This parameter is a function that when the image Instance created.

Do not use fromObjectmethod

Example

Let's look at a code example to understand how an Image object appears when fromObject Method is not used. In this case we just need to create an instance of fabric.Image and Add this to our canvas. 

<!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>Without using the fromObject method</h2>
   <p>You can see that the image object has been added to the canvas</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);
   </script>
</body>
</html>

Use fromObjectmethod

Example

In this example, we use the fromObject method to demonstrate that we can Image objects can be created even if we don't have an image element. In this case we The object from which the image instance needs to be created. after Call the callback function and add it to the canvas. 

<!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 fromObject method</h2>
   <p>You can see that the image has been added</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Using fromObject method
      fabric.Image.fromObject({
            type: "image",
            version: "5.1.0",
            originX: "left",
            originY: "top",
            left: 110,
            src: "https://www.tutorialspoint.com/images/logo.png",
         },
         function(oImg) {
            oImg.set("top", 50);
            canvas.add(oImg);
         }
      );
   </script>
</body>
</html>

in conclusion

In this tutorial, we use two examples to demonstrate how to create an instance Get a Fabric.Image from its object representation using FabricJS.

The above is the detailed content of FabricJS - How to create an instance of fabric.Image from its object representation?. For more information, please follow other related articles on the PHP Chinese website!

Object 回调函数 对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to set the vertical scale factor of an ellipse using FabricJS?Next article：How to set the vertical scale factor of an ellipse using FabricJS?

Related articles

See more