search

Home >Web Front-end >JS Tutorial >FabricJS - How to get the image element the current instance is based on?

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

PHPz
PHPzforward
2023-08-24 08:21:071247browse

FabricJS – 如何获取当前实例所基于的图像元素？

In this tutorial, we will learn how to use FabricJS to get the image element that the current instance is based on. 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 such as angle, opacity, etc. To get the image element the current instance is based on, we use the getElement method.

grammar

getElement(): HTMLImageElement

Use getElementmethod

Example

In this example, we use the getElement method to get the image element the current instance is based on. You can open the console from the developer tools to view the returned HTML image element. 

<!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>

Use getElement method and fromURL method

Example

Let's look at a code example of the output logged when the getElement method is used in conjunction with the 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>

The above is the detailed content of FabricJS - How to get the image element the current instance is based on?. For more information, please follow other related articles on the PHP Chinese website!

html 对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Constructing strings from character matrices and numeric arrays in JavaScriptNext article：Constructing strings from character matrices and numeric arrays in JavaScript

Related articles

See more