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 get the opacity of Image object using FabricJS?
In this tutorial, we are going to learn how to get the opacity of Image 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 get the opacity of Image, we use the getObjectOpacity method.
Syntax
getObjectOpacity(): Number
Parameters
This method takes no parameters and returns the current opacity value as a Number between 0 and 1.
Using the getObjectOpacity Method
Let's see a code example to see the logged output when the getObjectOpacity method is used. In this case, the default opacity will be displayed in the console which is 1.
<!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 getObjectOpacity method</h2>
<p>
You can open console from dev tools and see that the logged value is
being displayed in the console
</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 getObjectOpacity method
console.log("The opacity is: ", image.getObjectOpacity());
</script>
</body>
</html>
The opacity is: 1
Using the getObjectOpacity Method with Custom Opacity
Let's see a code example to see the logged output when the getObjectOpacity method is used in conjunction with the opacity property. In this case, the opacity of the image object has been assigned a value of 0.7 and hence the logged output will be 0.7.
<!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 getObjectOpacity method and passing the opacity property</h2>
<p>
You can open console from dev tools and see that the opacity value is being displayed in the console
</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,
opacity: 0.7,
});
// Add it to the canvas
canvas.add(image);
// Using getObjectOpacity method
console.log("The opacity is: ", image.getObjectOpacity());
</script>
</body>
</html>
The opacity is: 0.7
Return Value
The getObjectOpacity() method returns a Number representing the opacity value between 0 (completely transparent) and 1 (completely opaque).
Conclusion
The getObjectOpacity() method in FabricJS provides an easy way to retrieve the current opacity value of an Image object. This method is useful for checking transparency levels and managing visual effects in your canvas applications.
377 Views
