Bagaimana untuk mencari saiz asal imej menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mencari saiz asal imej menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-06 18:13:09

ke hadapan

794 orang telah melayarinya

如何使用 FabricJS 查找图像的原始大小？

Dalam tutorial ini, kita akan belajar cara mencari saiz asal 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, dsb. Untuk mencari saiz asal imej, kami menggunakan kaedah getOriginalSize.

tatabahasa

getOriginalSize(): Object

Salin selepas log masuk

Gunakan dapatkanSaizAsal kaedah

Contoh

Dalam contoh ini, kami menggunakan kaedah getOriginalSize untuk mendapatkan nilai lebar dan ketinggian imej. Di sini, nilai lebar dan ketinggian yang dikembalikan ialah 311 dan 82 masing-masing.

<!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 getOriginalSize method</h2>
   <p>
      You can open the console from dev tools to see that the logged output contains the height and width of the Image
   </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 getOriginalSize method
      console.log(
         "The original size of the Image object is: ",
         image.getOriginalSize()
      );
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan getOriginalSize kaedah dan cropX atribut

Contoh

Mari kita lihat contoh kod output yang dilog apabila kaedah getOriginalSize digunakan bersama dengan atribut cropX. Di sini kita menghantar nilai 50 kepada cropX. Oleh itu, objek Imej kami akan dipangkas 50px dalam arah x daripada saiz imej asal. Walau bagaimanapun, apabila kita menggunakan kaedah getOriginalSize, nilai lebar dan ketinggian yang kami pulangkan masing-masing ialah 311 dan 82, yang seterusnya membuktikan bahawa getOriginalSize hanya akan mengembalikan yang asal imej saiz.

<!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 getOriginalSize method along with cropX property</h2>
   <p>
      You can open the console from dev tools to see that the original size of the image will be returned regardless of having applied image cropping in xdirection
   </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,
         cropX: 50,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getOriginalSize method
      console.log(
         "The original size of the Image object is: ",
         image.getOriginalSize()
      );
   </script>
</body>
</html>

Salin selepas log masuk

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