Bagaimana untuk mendapatkan kod sumber imej menggunakan FabricJS?

王林
Lepaskan: 2023-08-22 12:17:02
ke hadapan
1323 orang telah melayarinya

Bagaimana untuk mendapatkan kod sumber imej menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara mendapatkan sumber Imej menggunakan FabricJS. 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 dll. Untuk mencari sumber Imej, kami menggunakan kaedah getSrc.

Sintaks

getSrc(filtered: Boolean): String 
Salin selepas log masuk

Parameter

  • ditapis − Parameter ini ialah nilai Boolean yang menunjukkan sama ada sumber diperlukan untuk svg atau tidak.

Menggunakan kaedah getSrc

Contoh

Dalam contoh ini, kami telah menggunakan kaedah getSrc untuk mendapatkan sumber asal imej. Ia boleh dilihat dalam konsol bahawa representasi Rentetan bagi sumber 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 getSrc method</h2>
   <p>
      You can open the console from dev tools to see that the logged output contains the image source
   </p> 
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Bagaimana untuk mendapatkan kod sumber imej menggunakan FabricJS?" >
   <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 getSrc method
      console.log("The Source of the image is: ", image.getSrc(false));
   </script>
</body>
</html> 
Salin selepas log masuk

Menggunakan kaedah getSrc bersama dengan kaedah fromURL

Contoh

Mari kita lihat contoh kod output yang dilog apabila kaedah getSrc digunakan bersama dengan kaedah fromURL.

<!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 getSrc method along with fromURL method</h2>
   <p>
      You can open the console from dev tools to see that the logged output contains the image source
   </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);
            
            // Using getSrc method
            console.log("The Source of the image is: ", Img.getSrc(false));
         }
      );
   </script>
</body>
</html> 
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan kod sumber imej menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:tutorialspoint.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan