FabricJS - Comment obtenir l'élément d'image sur lequel l'instance actuelle est basée ?-js tutoriel-php.cn

FabricJS - Comment obtenir l'élément d'image sur lequel l'instance actuelle est basée ?

PHPz

Libérer： 2023-08-24 08:21:07

avant

1243 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment utiliser FabricJS pour obtenir l'élément d'image sur lequel l'instance actuelle est basée. Nous pouvons créer un objet Image en créant une instance de fabric.Image. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour obtenir l'élément d'image sur lequel l'instance actuelle est basée, nous utilisons la méthode getElement.

Grammaire

getElement(): HTMLImageElement

Copier après la connexion

Utilisez la méthode getElement

Exemple

Dans cet exemple, nous utilisons la méthode getElement pour obtenir l'élément d'image sur lequel l'instance actuelle est basée. Vous pouvez ouvrir la console à partir des outils de développement pour afficher l'élément d'image HTML renvoyé.

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

Copier après la connexion

Utilisez la méthode getElement et la méthode fromURL

Exemple

Regardons un exemple de code de la sortie enregistrée lorsque la méthode getElement est utilisée en conjonction avec la méthode fromURL. Ici, nous pourrons voir l'élément d'image renvoyé dans la 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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!