FabricJS - How to remove shadow of current object in cloned image?-JS Tutorial-php.cn

FabricJS - How to remove shadow of current object in cloned image?

王林

Release： 2023-09-16 13:13:27

forward

1099 people have browsed it

FabricJS – 如何删除克隆图像中当前对象的阴影？

In this tutorial, we will learn how to remove the current object shadow in a cloned 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 remove the shadow of the current object in the cloned image, we use the withoutShadow property.

grammar

cloneAsImage( callback: function, { withoutShadow: Boolean }: Object): fabric.Object

Copy after login

parameter

Callback (optional) - This parameter is a function that will use the cloned image instance as the first call argument.
Options (optional) - This parameter is an optional object that provides additional customization to our cloned image . Using this parameter we can set a multiplier, crop the cloned image, remove the current object transform or can change many other properties, of which withoutShadow is a property.

Option key

withoutShadow - This property accepts a Boolean value that determines whether the current object shadow is removed. This attribute is optional.

Use the withoutShadow attribute and pass it a "true" value

Example

Let's look at a code example to see how a cloned Image object appears when using the withoutShadow property and passing it a "true" value. Here, the image object has been assigned a shadow property. However, since we passed a "true" value to the withoutShadow property, the object shadow will be removed and our cloned image will no longer have a shadow.

<!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 withoutShadow property and passing it a ‘true’ value</h2>
   <p>You can see that clone image does not have a shadow</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 a shadow object
      var shadow = new fabric.Shadow({
         color: "black",
         blur: 12,
      });
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20, 
         shadow: shadow,
      });
      
      // Using cloneAsImage method
      image.cloneAsImage(
         function (Img) {
            Img.set("top", 150);
            Img.set("left", 150);
            canvas.add(Img);
         },
         {
            withoutShadow: true,
         }
      );
   </script>
</body>
</html>

Copy after login

Use the withoutShadow attribute and pass it a "false" value

Example

In this example, we used the withoutShadow attribute and passed it a "false" value. Therefore, our cloned object's shadow will not be removed.

<!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 withoutShadow property and passing it a ‘false’ value</h2>
   <p>You can see that clone image contains a shadow</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 a shadow object
      var shadow = new fabric.Shadow({
         color: "black",
         blur: 12,
      });
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      
      // Using cloneAsImage method
      image.cloneAsImage(
         function (Img) {
            Img.set("top", 150);
            Img.set("left", 150);
            canvas.add(Img);
         },
         {
            withoutShadow: false,
         }
      );
   </script>
</body>
</html>

Copy after login

The above is the detailed content of FabricJS - How to remove shadow of current object in cloned image?. For more information, please follow other related articles on the PHP Chinese website!