FabricJS – How to get the image element on which the current instance is based on?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn how to get the image element on which the current instance is based on 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 get the image element on which the current instance is based on, we use the getElement method.

Syntax

getElement(): HTMLImageElement

Using the getElement method

Example

In this example, we have used the getElement method to obtain the image element on which the current instance is based on. You can open the console from dev tools to see the HTML image element being 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 getElement method</h2>
   <p>You can open the console from dev tools to see the logged output</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,
         skewX: 15,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getElement method
      console.log(
         "The image element on which the current instance is based on is as follows: ",
         image.getElement()
      );
   </script>
</body>
</html>

Using the getElement method along with fromURL method

Example

Let’s see a code example of the logged output when the getElement method is used in conjunction with fromURL method. Here, we will be able to see the image element returned in the console.


<!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 getElement method along with fromURL method</h2>
   <p>You can open the console from dev tools to see the logged output</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 fromURL method
      fabric.Image.fromURL(
         "https://www.tutorialspoint.com/images/logo.png",
         function (Img) {
            canvas.add(Img);
               console.log(
                  "The image element on which the current instance is based on is as follows: ",
                  Img.getElement()
               );
            }
      );
   </script>
</body>
</html>

Rahul Gurung

Updated on: 27-Oct-2022

560 Views

Kickstart Your Career

Get certified by completing the course

Get Started