Bagaimana untuk menyemak sama ada imej telah dipangkas menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menyemak sama ada imej telah dipangkas menggunakan FabricJS?

PHPz

Lepaskan： 2023-08-24 16:29:02

ke hadapan

1036 orang telah melayarinya

如何使用 FabricJS 检查图像是否已应用裁剪？

Dalam tutorial ini kami akan menunjukkan kepada anda cara menyemak sama ada imej telah dipangkas digunakan Gunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta instance fabric.Image. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah Gunakan sifat seperti sudut, kelegapan, dsb. untuk mencari sama ada imej telah dipangkas Semasa memohon, kami menggunakan kaedah hasCrop. Kaedah ini mengembalikan palsu jika tanaman tidak Digunakan, atau nilai keratan yang digunakan jika digunakan.

Tatabahasa

hasCrop(): Boolean | Number

Salin selepas log masuk

Gunakan kaedah hasCrop

Contoh

Dalam contoh ini, kami menggunakan kaedah hasCrop untuk mencari sama ada objek Imej Tanaman gunaan. Dalam kes ini objek imej kami tidak mempunyai sebarang pemangkasan imej Output yang dilog adalah palsu.

<!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 hasCrop method</h2>
   <p>
      You can open the console from dev tools to see that the logged output is false
   </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 hasCrop method
      console.log("Is crop applied for the Image object?: ", image.hasCrop());
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah hasCrop dan atribut cropY

Contoh

Mari lihat contoh kod output yang dilog apabila menggunakan kaedah hasCrop dengan atribut cropY. Kami telah menghantar nilai 2 kepada atribut cropY yang akan Pastikan objek imej mempunyai pangkas imej 2px dalam arah Y. dalam kes ini, Nilai keratan 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 hasCrop method along with cropY property</h2>
   <p>
      You can open the console from dev tools to see that the logged output is 2
   </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,
         cropY: 2,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the hasCrop method
      console.log(
         "Crop value applied for the Image object is: ",
         image.hasCrop()
      );
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara menyemak sama ada imej Pemotongan digunakan menggunakan FabricJS.

Atas ialah kandungan terperinci Bagaimana untuk menyemak sama ada imej telah dipangkas menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!