How to set the opacity of an image using FabricJS?-JS Tutorial-php.cn

How to set the opacity of an image using FabricJS?

WBOY

Release： 2023-08-24 23:53:10

forward

930 people have browsed it

How to set the opacity of an image using FabricJS?

In this tutorial, we will learn how to set the opacity of an image using FabricJS. us Image objects can be created by creating an instance of fabric.Image. since it is one of Basic element of FabricJS, we can also easily customize it by applying properties Such as angle, opacity, etc. To set the opacity of an image, we use the opacity property.

grammar

new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { opacity: Number }: Object, callback: function)

Copy after login

parameter

element - This parameter accepts an HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, or a string representing an image element. The string should be a URL and will be loaded as an image.
Options (optional) - This parameter is an object that provides additional customization to our object. Using this parameter, you can change the origin, stroke width, and many other properties related to image objects whose opacity is an attribute.
Callback (optional) - This parameter is a function that is called after the final filter is applied..< /p>

Option key

opacity - This property accepts a Number which allows us to control A thing. opacity The default value of the property is 1.

Default appearance of Image object

Example

Let’s look at a code example to see what our image object looks like with default values Opacity Property. In this example we are not passing any opaque keys as shown below -

<!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>Default appearance of Image object</h2>
   <p>You can see that the image object is fully opaque</p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="How to set the opacity of an image using FabricJS?" >
   <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: 50,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Copy after login

Pass the opacity attribute as key

Example

In this example we will see how the assignment to the opacity property changes The opacity of the image object in the canvas. Here we use 0.3 as opacity, so Makes our image object appear semi-transparent instead of completely opaque.

<!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>Passing the opacity property as key</h2>
   <p>You can see our image object is not fully opaque</p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="How to set the opacity of an image using FabricJS?" >
   <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: 50,
         opacity: 0.3,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Copy after login

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