Comment trouver la taille originale d'une image à l'aide de FabricJS ?-js tutoriel-php.cn

Comment trouver la taille originale d'une image à l'aide de FabricJS ?

WBOY

Libérer： 2023-09-06 18:13:09

avant

886 Les gens l'ont consulté

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

Dans ce tutoriel, nous apprendrons comment trouver la taille originale d'une image à l'aide de FabricJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour retrouver la taille originale de l'image, nous utilisons la méthode getOriginalSize.

Grammaire

getOriginalSize(): Object

Copier après la connexion

Utilisez la méthode getOriginalSize

Exemple

Dans cet exemple, nous avons utilisé la méthode getOriginalSize pour obtenir les valeurs de largeur et de hauteur de l'image. Ici, les valeurs de largeur et de hauteur renvoyées sont respectivement 311 et 82.

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

Copier après la connexion

Utilisez la méthode getOriginalSize et l'attribut cropX

Exemple

Regardons un exemple de code de la sortie enregistrée lorsque la méthode getOriginalSize est utilisée en conjonction avec l'attribut cropX. Ici, nous transmettons la valeur 50 à cropX. Par conséquent, notre objet Image sera recadré de 50 pixels dans la direction x par rapport à la taille de l'image d'origine. Cependant, lorsque nous utilisons la méthode getOriginalSize, nous renvoyons respectivement des valeurs de largeur et de hauteur de 311 et 82, ce qui prouve en outre que getOriginalSize ne renverra que l'image à la taille d'origine.

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!