Comment créer une représentation JSON d'un objet Image à l'aide de FabricJS ?-js tutoriel-php.cn

Comment créer une représentation JSON d'un objet Image à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-05 19:09:06

avant

1406 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment créer une représentation JSON d'une image Objets utilisant FabricJS. Nous pouvons créer un objet Image en créant une instance Tissu.Image. Puisqu’il s’agit d’un des éléments de base de FabricJS, on peut aussi facilement Personnalisez-le en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour créer du JSON Pour la représentation des objets Image, nous utilisons la méthode toJSON.

Grammaire

toJSON(propertiesToInclude: Array): Object

Copier après la connexion

Paramètres

propertiesToInclude - Ce paramètre accepte un Array contenant n'importe quel Attributs supplémentaires que nous souhaiterons peut-être inclure dans la sortie. Ce paramètre est Facultatif.

Utilisez la méthode toJSON

Exemple

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode toJSON. exister Dans ce cas, une représentation JSON de l'instance d'image est renvoyée.

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

Copier après la connexion

Ajoutez des propriétés supplémentaires à l'aide de la méthode toJSON

Exemple

Regardons un exemple de code pour voir comment utiliser Méthode toJSON. Dans cet exemple, nous avons ajouté une propriété personnalisée appelée « name ». nous pouvons Transmettez des propriétés spécifiques à l'instance fabric.Image comme deuxième paramètre dans les options object et transmettez la même clé à la méthode toJSON.

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

Copier après la connexion