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 set a multiplier to scale a cloned image using FabricJS?
In this tutorial, we are going to learn how to set a multiplier to scale the 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 set a multiplier to scale the cloned image, we use the multiplier property.
Syntax
cloneAsImage( callback: function, { multiplier: Number}: Object): fabric.Object
Parameters
callback (optional) ? This parameter is a function which is to be 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 a lot of properties can be changed of which multiplier is a property.
Options Keys
multiplier ? This property accepts a Number value which denotes the multiplier to scale the final output image by. The default value is 1.
Without using the multiplier property
Let's see a code example of how the cloned Image object appears when the multiplier property is not used. In this case, the default multiplier value will be used, which is 1.
<!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 multiplier property</h2>
<p>You can see that the clone image uses the default multiplier</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,
});
// Using cloneAsImage method
image.cloneAsImage(function (Img) {
canvas.add(Img);
});
</script>
</body>
</html>
Using the multiplier property
In this example, we have used the multiplier property and passed it a value 2 to demonstrate that the final cloned image will be scaled by twice in both x and y directions.
<!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 multiplier property</h2>
<p>You can see that the clone image has been scaled</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,
});
// Using cloneAsImage method with multiplier
image.cloneAsImage(
function (Img) {
Img.set("top", 90);
canvas.add(Img);
},
{
multiplier: 2,
}
);
</script>
</body>
</html>
Key Points
- The multiplier property scales the cloned image uniformly in both x and y directions
- A multiplier value of 1 (default) keeps the image at its original size
- Values greater than 1 increase the size, while values less than 1 reduce it
- The scaling is applied to the final output image, not the original fabric object
Conclusion
The multiplier property in FabricJS's cloneAsImage method provides an easy way to scale cloned images. Use values greater than 1 to enlarge or less than 1 to shrink the cloned image output.
454 Views
