Rumah > Artikel > hujung hadapan web > FabricJS - Bagaimana untuk mendapatkan elemen imej yang dijadikan contoh semasa?

FabricJS - Bagaimana untuk mendapatkan elemen imej yang dijadikan contoh semasa?

PHPzke hadapan: 2023-08-24 08:21:071226semak imbas

FabricJS – 如何获取当前实例所基于的图像元素？

Dalam tutorial ini, kita akan belajar cara menggunakan FabricJS untuk mendapatkan elemen imej yang dijadikan contoh semasa. Kita boleh mencipta objek Imej dengan mencipta contoh fabric.Image. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk mendapatkan elemen imej yang dijadikan contoh semasa, kami menggunakan kaedah getElement.

Tatabahasa

getElement(): HTMLImageElement

Gunakan getElementkaedah

Contoh

Dalam contoh ini, kami menggunakan kaedah getElement untuk mendapatkan elemen imej yang dijadikan contoh semasa. Anda boleh membuka konsol daripada alat pembangun untuk melihat elemen imej HTML yang 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 getElement method</h2>
   <p>You can open the console from dev tools to see the logged output</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,
         skewX: 15,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getElement method
      console.log(
         "The image element on which the current instance is based on is as follows: ",
         image.getElement()
      );
   </script>
</body>
</html>

Gunakan kaedah getElement dan kaedah fromURL

Contoh

Mari kita lihat contoh kod output yang dilog apabila kaedah getElement digunakan bersama dengan kaedah fromURL. Di sini kita akan dapat melihat elemen imej dikembalikan dalam konsol.

<!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 getElement method along with fromURL method</h2>
   <p>You can open the console from dev tools to see the logged output</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Using fromURL method
      fabric.Image.fromURL(
         "https://www.tutorialspoint.com/images/logo.png",
         function (Img) {
            canvas.add(Img);
               console.log(
                  "The image element on which the current instance is based on is as follows: ",
                  Img.getElement()
               );
            }
      );
   </script>
</body>
</html>

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk mendapatkan elemen imej yang dijadikan contoh semasa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html 对象 fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Membina rentetan daripada matriks aksara dan tatasusunan angka dalam JavaScriptArtikel seterusnya：Membina rentetan daripada matriks aksara dan tatasusunan angka dalam JavaScript

Artikel berkaitan

Lihat lagi