Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to check if an Image has crop applied using FabricJS?
In this tutorial, we are going to show how you can check if an Image has crop applied using 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 also easily customize it by applying properties like angle, opacity etc. In order to find whether an Image has crop applied, we use the hasCrop method. This method returns false in case of crop is not applied, or the applied crop value in case if it is applied.
Syntax
hasCrop(): Boolean | Number
Using the hasCrop method
In this example, we have used the hasCrop method to find whether the Image object has crop applied. In this case, our image object does not have any image cropping due to which 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="/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>
Is crop applied for the Image object?: false
Using the hasCrop method along with cropY property
Let's see a code example of the logged output when the hasCrop method is used along with the cropY property. We have passed the cropY property a value of 2 which will ensure that the image object has a 2px image crop in the Y-direction. In this case, the crop 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="/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>
Crop value applied for the Image object is: 2
Key Points
- The
hasCrop()method returnsfalsewhen no crop is applied to the image - When crop is applied using properties like
cropXorcropY, the method returns the crop value - This method is useful for conditionally handling cropped vs uncropped images in your FabricJS applications
Conclusion
The hasCrop() method provides a simple way to detect if an Image object has cropping applied in FabricJS. It returns false for uncropped images and the crop value when cropping is present.
341 Views
