search

Home >Web Front-end >JS Tutorial >How to check if an image has cropping applied using FabricJS?

How to check if an image has cropping applied using FabricJS?

PHPz
PHPzforward
2023-08-24 16:29:021040browse

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

In this tutorial we will show you how to check if an image has cropping applied Use FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can easily customize it as well Apply properties such as angle, opacity, etc. to find if the image has been cropped When applying, we use the hasCrop method. This method returns false if the crop is not Applied, or the applied crop value if applied.

grammar

hasCrop(): Boolean | Number

UsehasCropMethod

Example

In this example, we use the hasCrop method to find whether the Image object Applied crops. In this case our image object does not have any image cropping The logged output is false. 

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

Using the hasCrop method and the cropY attribute

Example

Let's look at a code example of the output logged when using the hasCrop method with the cropY attribute. We have passed the value 2 to the cropY property which will Make sure the image object has a 2px image crop in the Y direction. in this case, The clipping value is returned in the 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>

in conclusion

In this tutorial, we use two examples to demonstrate how to check whether an image Cropping was applied using FabricJS.

The above is the detailed content of How to check if an image has cropping applied using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Implement image transitions with fade effects using JavaScriptNext article：Implement image transitions with fade effects using JavaScript

Related articles

See more