cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mencipta contoh Fabric.Image daripada rentetan URL menggunakan FabricJS?

Bagaimana untuk mencipta contoh Fabric.Image daripada rentetan URL menggunakan FabricJS?

PHPz
PHPzke hadapan
2023-08-24 14:09:111873semak imbas

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

Dalam tutorial ini kita akan belajar bagaimana untuk bermula dari Rentetan URL menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh Fabrik.Imej. Memandangkan ia adalah salah satu elemen asas FabricJS, kita juga boleh dengan mudah Sesuaikan dengan menggunakan sifat seperti sudut, kelegapan dan banyak lagi. untuk mencipta Contoh Fabric.Imej daripada rentetan URL, kami menggunakan kaedah fromURL.

Tatabahasa

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

Parameter

  • url - Parameter ini menerima rentetan yang mewakili URL dari mana imej itu dicipta.

  • panggil balik (pilihan) - Parameter ini ialah fungsi yang dipanggil sejurus selepas imej dicipta. Untuk fungsi ini, imej yang baru dibuat diluluskan sebagai parameter pertama. Parameter kedua ialah nilai Boolean yang menunjukkan sama ada ralat berlaku. Parameter ini adalah pilihan.

  • imgOptions (pilihan) - Parameter ini ialah objek pilihan yang menyediakan penyesuaian tambahan pada imej kami. Gunakan parameter ini untuk menukar asal, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek imej.

Jangan gunakan fromURLkaedah

Contoh

Mari kita lihat contoh kod untuk melihat bagaimana objek Imej dipaparkan apabila menggunakan kaedah fromURL Tidak digunakan. Dalam kes ini, kita hanya perlu mencipta contoh fabric.Image dan menambahnya ke kanvas kami. 

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

Gunakan kaedah fromURL

Contoh

Dalam contoh ini kami menggunakan kaedah fromURL untuk menunjukkan bahawa kami boleh mencipta Walaupun kami tidak mempunyai elemen imej, ia adalah objek imej. Dalam kes ini kita hanya perlukan Memerlukan URL imej dan lulus fungsi panggil balik yang dibuat fabric.Image objek sebagai parameter pertama dan kemudian tambahkannya pada kanvas. 

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

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara mencipta Dapatkan Fabric.Image daripada rentetan URL menggunakan FabricJS.

Atas ialah kandungan terperinci Bagaimana untuk mencipta contoh Fabric.Image daripada rentetan URL menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk memangkas lebar imej klon menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk memangkas lebar imej klon menggunakan FabricJS?

Artikel berkaitan

Lihat lagi