Wie erstelle ich mit FabricJS eine Instanz von Fabric.Image aus einer URL-Zeichenfolge?-js-Tutorial-php.cn

Wie erstelle ich mit FabricJS eine Instanz von Fabric.Image aus einer URL-Zeichenfolge?

PHPz

Freigeben： 2023-08-24 14:09:11

nach vorne

1900 Leute haben es durchsucht

如何使用 FabricJS 从 URL 字符串创建 Fabric.Image 的实例？

In diesem Tutorial lernen wir, wie man anfängt URL-String mit FabricJS. Wir können ein Bildobjekt erstellen, indem wir eine Instanz erstellen Stoff.Bild. Da es eines der Grundelemente von FabricJS ist, können wir es auch problemlos Passen Sie es an, indem Sie Eigenschaften wie Winkel, Deckkraft und mehr anwenden. um zu erschaffen Um eine Fabric.Image-Instanz aus einer URL-Zeichenfolge zu erstellen, verwenden wir die Methode fromURL.

Grammatik

fromURL(url: String, callback: function, imgOptions: Object)

Nach dem Login kopieren

Parameter

url – Dieser Parameter akzeptiert eine Zeichenfolge, die die URL darstellt, von der aus das Bild erstellt wurde.
Rückruf (optional) – Dieser Parameter ist eine Funktion , die unmittelbar nach der Erstellung des Bildes aufgerufen wird. Für diese Funktion wird das neu erstellte Bild als erster Parameter übergeben. Der zweite Parameter ist ein boolescher Wert, der angibt, ob ein Fehler aufgetreten ist. Dieser Parameter ist optional.
imgOptions (optional) – Dieser Parameter ist ein optionales Objekt, das unserem Bild zusätzliche Anpassungen ermöglicht. Verwenden Sie diesen Parameter, um den Ursprung, die Strichstärke und viele andere mit dem Bildobjekt verknüpfte Eigenschaften zu ändern.

Verwenden Sie nicht die fromURLMethode

Beispiel

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Bildobjekt angezeigt wird, wenn die Methode fromURL verwendet wird Nicht verwendet. In diesem Fall müssen wir lediglich eine Instanz von fabric.Image erstellen und hinzufügen zu unserer Leinwand.

<!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>Without using the fromURL method</h2>
   <p>You can see that the image object has been added to the canvas</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,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die fromURL-Methode

Beispiel

In diesem Beispiel haben wir die Methode fromURL verwendet, um zu zeigen, dass wir erstellen können Auch wenn wir kein Bildelement haben, ist es ein Bildobjekt. In diesem Fall brauchen wir nur Erfordert die URL des Bildes und übergibt die erstellte Rückruffunktion fabric.Image-Objekt als ersten Parameter und fügen Sie es dann der Leinwand hinzu.

<!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 fromURL method</h2>
   <p>
      You can see that the image object can be created from the image URL itself
   </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Calling fabric.Image.fromURL and passing the url of our desired image
      fabric.Image.fromURL(
         "https://www.tutorialspoint.com/images/logo.png",
         function(Img) {
            canvas.add(Img);
         }
      );
   </script>
</body>
</html>

Nach dem Login kopieren

Fazit

In diesem Tutorial zeigen wir anhand von zwei Beispielen, wie man erstellt Rufen Sie mit FabricJS ein Fabric.Image aus einer URL-Zeichenfolge ab.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS eine Instanz von Fabric.Image aus einer URL-Zeichenfolge?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!