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 crop the width in a cloned image using FabricJS?
In this tutorial, we are going to learn how to crop the width 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 like angle, opacity etc. In order to crop the width in a cloned image, we use the width property with the cloneAsImage method.
Syntax
cloneAsImage(callback: function, options: Object): fabric.Object
Parameters
callback (optional) ? This parameter is a function which is invoked with a cloned image instance as the first argument.
options (optional) ? This parameter is an optional Object which provides additional customizations to our clone image. Using this parameter we can set a multiplier, crop the clone image, remove the current object transform or change other properties, including
width.
Options Keys
width ? This property accepts a Number value which denotes the cropping width. This property is optional.
Without using the width property
Let's see a code example of how the cloned Image object appears when the width property is not used. In this case, the cloned image will not be cropped.
<!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>Without using the width property</h2>
<p>You can see that no cropping has been applied to the clone image</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: "#308080",
blur: 3,
});
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
skewX: 20,
shadow: shadow,
});
// Add original image to canvas
canvas.add(image);
// Using cloneAsImage method
image.cloneAsImage(function(Img) {
Img.set("top", 150);
canvas.add(Img);
});
</script>
</body>
</html>
Using the width property
In this example, we have used the width property and passed it a value of 245 which is the cropping width. The cloned image will be cropped to this specified width.
<!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 width property</h2>
<p>You can see that cropping has been applied to the clone image</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: "#308080",
blur: 3,
});
// Initiate an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
skewX: 20,
shadow: shadow,
});
// Add original image to canvas
canvas.add(image);
// Using cloneAsImage method with width property
image.cloneAsImage(
function(Img) {
Img.set("top", 150);
Img.set("left", 150);
canvas.add(Img);
}, {
width: 245,
}
);
</script>
</body>
</html>
Key Points
- The
cloneAsImagemethod creates a clone of the image object as an actual image element - The
widthproperty in the options parameter controls the cropped width of the cloned image - When no
widthis specified, the cloned image retains its original dimensions - The callback function receives the cloned image instance, allowing further customization
Conclusion
The width property in FabricJS's cloneAsImage method provides an effective way to crop the width of cloned images. This feature is useful for creating thumbnails or resized versions of existing canvas images.
493 Views
