cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk membuat perwakilan JSON bagi objek Imej menggunakan FabricJS?

Bagaimana untuk membuat perwakilan JSON bagi objek Imej menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-09-05 19:09:061493semak imbas

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

Dalam tutorial ini kita akan belajar cara membuat perwakilan JSON bagi imej Objek menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh Fabrik.Imej. Oleh kerana ia adalah salah satu elemen asas FabricJS, kita juga boleh dengan mudah Sesuaikan dengan menggunakan sifat seperti sudut, kelegapan dan banyak lagi. Untuk membuat JSON Untuk perwakilan objek Imej, kami menggunakan kaedah toJSON.

Tatabahasa

toJSON(propertiesToInclude: Array): Object

Parameter

  • propertiesToInclude - Parameter ini menerima Array yang mengandungi sebarang Atribut tambahan yang mungkin ingin kami sertakan dalam output. Parameter ini ialah Pilihan.

Gunakan toJSONkaedah

Contoh

Mari lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah toJSON. wujud Dalam kes ini, perwakilan JSON bagi contoh imej dikembalikan. 

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

Tambah sifat tambahan menggunakan kaedah toJSON

Contoh

Mari lihat contoh kod untuk melihat cara menggunakan kaedah toJSON. Dalam contoh ini, kami menambahkan sifat tersuai yang dipanggil "nama". kita boleh Hantar sifat khusus kepada contoh fabric.Image sebagai hujah kedua dalam pilihan objek dan hantar kekunci yang sama kepada kaedah 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>

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara mencipta JSON Gunakan FabricJS untuk mewakili objek Imej.

Atas ialah kandungan terperinci Bagaimana untuk membuat perwakilan JSON bagi objek Imej menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

json Array 对象 fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Tambahkan animasi pada halaman web menggunakan Velocity.jsArtikel seterusnya：Tambahkan animasi pada halaman web menggunakan Velocity.js

Artikel berkaitan

Lihat lagi