Home > Article > Web Front-end > FabricJS - How to remove shadow of current object in cloned image?
FabricJS - How to remove shadow of current object in cloned image?
- 王林forward
- 2023-09-16 13:13:271073browse
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
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>
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>
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!