Heim > Artikel > Web-Frontend > Wie erstelle ich mit FabricJS eine JSON-Darstellung eines Bildobjekts?

Wie erstelle ich mit FabricJS eine JSON-Darstellung eines Bildobjekts?

WBOYnach vorne: 2023-09-05 19:09:061469Durchsuche

如何使用 FabricJS 创建 Image 对象的 JSON 表示？

In diesem Tutorial lernen wir, wie man eine JSON-Darstellung eines Bildes erstellt Objekte 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. So erstellen Sie JSON Zur Darstellung von Bildobjekten verwenden wir die Methode toJSON.

Grammatik

toJSON(propertiesToInclude: Array): Object

Parameter

propertiesToInclude – Dieser Parameter akzeptiert ein Array, das beliebige enthält Zusätzliche Attribute, die wir möglicherweise in die Ausgabe einbeziehen möchten. Dieser Parameter ist Optional.

Verwenden Sie die toJSON-Methode

Beispiel

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der

toJSON-Methode zu sehen. existieren In diesem Fall wird eine JSON-Darstellung der Bildinstanz zurückgegeben.

<!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 toJSON method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the JSON representation of the image instance
   </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);
      
      // Using the toJSON method
      console.log(
         "JSON representation of the Image instance is: ",
         image.toJSON()
      );
   </script>
</body>
</html>

Fügen Sie zusätzliche Eigenschaften mit der

toJSON-Methode hinzu

Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, wie es verwendet wird

toJSON-Methode. In diesem Beispiel haben wir eine benutzerdefinierte Eigenschaft namens „name“ hinzugefügt. wir können Übergeben Sie bestimmte Eigenschaften als zweites Argument in den Optionen an die fabric.Image-Instanz Objekt und übergeben Sie denselben Schlüssel an die toJSON-Methode.

<!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 toJSON method to add additional properties</h2>
   <p>
      You can open console from dev tools and see that the logged output contains added property called name
   </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 with name key
      // passed in options object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         name: "Image instance",
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the toJSON method
      console.log(
         "JSON representation of the Image instance is: ",
         image.toJSON(["name"])
      );
   </script>
</body>
</html>

Fazit

In diesem Tutorial zeigen wir anhand zweier Beispiele, wie man JSON erstellt Verwenden Sie FabricJS, um Bildobjekte darzustellen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS eine JSON-Darstellung eines Bildobjekts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

json Array 对象 fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Fügen Sie mit Velocity.js Animationen zu Webseiten hinzuNächster Artikel：Fügen Sie mit Velocity.js Animationen zu Webseiten hinzu

In Verbindung stehende Artikel

Mehr sehen