FabricJS – How to create the instance of fabric.Image from its object representation?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to show how you can create the instance of fabric.Image from its object representation 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 the instance of fabric.Image from its object representation, we use the fromObject method.

Syntax

fromObject(object: Object, callback: function)

Parameters

object − This parameter accepts an Object which denotes the object from which the image will be created.
callback − This parameter is a function which is to be invoked when the image instance is created.

Without using the fromObject method

Example

Let’s see a code example of how the Image object appears when the fromObject method is not used. In this case, we only need to create an instance of fabric.Image and add it 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>

Using the fromObject method

Example

In this example, we have used the fromObject method to demonstrate that we can create an image object even when we don’t have the image element. In this case, we need the object from which the image instance is to be created from. After that the callback function is invoked and it is added 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>

Conclusion

In this tutorial, we used two examples to demonstrate how you can create the instance of fabric.Image from its object representation using FabricJS.

Rahul Gurung

Updated on: 26-Oct-2022

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started