Maison >interface Web >js tutoriel >Comment vérifier si un recadrage a été appliqué à une image à l'aide de FabricJS ?

Comment vérifier si un recadrage a été appliqué à une image à l'aide de FabricJS ?

PHPzavant: 2023-08-24 16:29:021036parcourir

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

Dans ce tutoriel, nous allons vous montrer comment vérifier si un recadrage a été appliqué à une image Utilisez FabricJS. Nous pouvons créer un objet Image en créant une instance de fabric.Image. Puisqu'il s'agit d'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement. Appliquez des propriétés telles que l'angle, l'opacité, etc. pour savoir si l'image a été recadrée Lors de la candidature, nous utilisons la méthode hasCrop. Cette méthode renvoie false si le recadrage n'est pas Appliqué, ou la valeur de la culture appliquée si elle est appliquée.

Grammaire

hasCrop(): Boolean | Number

Utilisez la méthode hasCrop

Exemple

Dans cet exemple, nous utilisons la méthode hasCrop pour déterminer si l'objet Image Cultures appliquées. Dans ce cas, notre objet image n'a aucun recadrage d'image La sortie enregistrée est fausse.

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

Utilisez la méthode hasCrop et l'attribut cropY

Exemple

Regardons un exemple de code de la sortie enregistrée lors de l'utilisation de la méthode hasCrop avec l'attribut cropY. Nous avons passé la valeur 2 à l'attribut cropY qui va Assurez-vous que l'objet image a un recadrage d'image de 2 pixels dans la direction Y. dans ce cas, La valeur de découpage est renvoyée dans la console.

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

Conclusion

Dans ce tutoriel, nous utilisons deux exemples pour montrer comment vérifier si une image Le recadrage a été appliqué à l'aide de FabricJS.

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Implémenter des transitions d'image avec des effets de fondu à l'aide de JavaScriptArticle suivant：Implémenter des transitions d'image avec des effets de fondu à l'aide de JavaScript

Articles Liés

Voir plus