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 create a cloned image object using FabricJS?
In this tutorial, we are going to show how you can create a cloned image object 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 create a cloned image object, we use 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 or remove the current object transform.
Without using the cloneAsImage method
Let's see a code example of how the Image object appears when the cloneAsImage method is not used. In this case, the instance of fabric.Image itself will be present in our canvas.
<!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 cloneAsImage method</h2>
<p>You can see that the image instance has been formed</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 it to the canvas
canvas.add(image);
</script>
</body>
</html>
Using the cloneAsImage method
In this example, we have used the cloneAsImage method to demonstrate that we can create the clone of an instance of fabric.Image by using a callback method. We will further add that cloned image to the canvas.
<!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 cloneAsImage method</h2>
<p>You can see that a clone image instance has been formed</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>
Key Differences
The main difference between the two approaches is that cloneAsImage creates an independent copy of the image object. This means any modifications to the original image won't affect the cloned version, making it useful for creating multiple instances with different properties.
Conclusion
The cloneAsImage method in FabricJS provides a convenient way to create independent copies of image objects. This is particularly useful when you need multiple instances of the same image with different transformations or properties.
1K+ Views
