FabricJS – Wie erhalte ich das Bildelement, auf dem die aktuelle Instanz basiert?-js-Tutorial-php.cn

FabricJS – Wie erhalte ich das Bildelement, auf dem die aktuelle Instanz basiert?

PHPz

Freigeben： 2023-08-24 08:21:07

nach vorne

1242 Leute haben es durchsucht

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

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS das Bildelement abrufen, auf dem die aktuelle Instanz basiert. Wir können ein Image-Objekt erstellen, indem wir eine Instanz von fabric.Image erstellen. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um das Bildelement abzurufen, auf dem die aktuelle Instanz basiert, verwenden wir die Methode getElement.

Grammatik

getElement(): HTMLImageElement

Nach dem Login kopieren

Verwenden Sie die Methode getElement

Beispiel

In diesem Beispiel verwenden wir die Methode

getElement, um das Bildelement abzurufen, auf dem die aktuelle Instanz basiert. Sie können die Konsole über die Entwicklertools öffnen, um das zurückgegebene HTML-Bildelement anzuzeigen.

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

Nach dem Login kopieren

Verwenden Sie die Methoden

getElement und fromURL Beispiel

Sehen wir uns ein Codebeispiel der protokollierten Ausgabe an, wenn die Methode

getElement

in Verbindung mit der Methode fromURL verwendet wird. Hier können wir das in der Konsole zurückgegebene Bildelement sehen.

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonFabricJS – Wie erhalte ich das Bildelement, auf dem die aktuelle Instanz basiert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!