Heim > Artikel > Web-Frontend > Wie erstelle ich mit FabricJS eine JSON-Darstellung eines Bildobjekts?
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.
toJSON(propertiesToInclude: Array): Object
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.
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. 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
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!