Home > Web Front-end > JS Tutorial > How to get the opacity of an Image object using FabricJS?

How to get the opacity of an Image object using FabricJS?

WBOY
Release: 2023-08-28 16:49:09
forward
1330 people have browsed it

如何使用 FabricJS 获取 Image 对象的不透明度?

In this tutorial, we will learn how to get the opacity of an 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 such as angle, opacity, etc. To get the opacity of an Image, we use the getObjectOpacity method. p>

grammar

getObjectOpacity(): Number 
Copy after login

Use getObjectOpacityMethod

Example

Let's look at a code example to see the output logged when using the getObjectOpacity method. In this case, the default opacity of 1 will be displayed 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 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> 
Copy after login

Use the getObjectOpacity method and pass the opacity property

Example

Let's look at a code example to see the output logged when the getObjectOpacity method is used in conjunction with the opacity property. In this example, the image object's opacity is assigned 0.7, so the recorded 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> 
Copy after login

The above is the detailed content of How to get the opacity of an Image object using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

source:tutorialspoint.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template