Wie erhalte ich den Quellcode eines Bildes mit FabricJS?-js-Tutorial-php.cn

Wie erhalte ich den Quellcode eines Bildes mit FabricJS?

王林

Freigeben： 2023-08-22 12:17:02

nach vorne

1258 Leute haben es durchsucht

Wie erhalte ich den Quellcode eines Bildes mit FabricJS?

In diesem Tutorial erfahren wir, wie wir mit FabricJS die Bildquelle abrufen. 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 die Quelle eines Bildes zu finden, verwenden wir die Methode getSrc.

Syntax

getSrc(filtered: Boolean): String

Nach dem Login kopieren

Parameter

filtered − Dieser Parameter ist ein Boolean-Wert, der angibt, ob die Quelle für SVG benötigt wird oder nicht.

Mit der getSrc-Methode

Beispiel

In diesem Beispiel haben wir die Methode getSrc verwendet, um die Originalquelle des Bildes abzurufen. In der Konsole ist zu sehen, dass eine String-Darstellung der Bildquelle zurückgegeben wird.

<!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 getSrc method</h2>
   <p>
      You can open the console from dev tools to see that the logged output contains the image source
   </p> 
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Wie erhalte ich den Quellcode eines Bildes mit FabricJS?" >
   <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 getSrc method
      console.log("The Source of the image is: ", image.getSrc(false));
   </script>
</body>
</html>

Nach dem Login kopieren

Verwendung der Methode getSrc zusammen mit der Methode fromURL

Beispiel

Sehen wir uns ein Codebeispiel der protokollierten Ausgabe an, wenn die getSrc-Methode in Verbindung mit der fromURL-Methode verwendet wird.

<!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 getSrc method along with fromURL method</h2>
   <p>
      You can open the console from dev tools to see that the logged output contains the image source
   </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);
            
            // Using getSrc method
            console.log("The Source of the image is: ", Img.getSrc(false));
         }
      );
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie erhalte ich den Quellcode eines Bildes mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!