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 left offset in a cloned image using FabricJS?
In this tutorial, we are going to show how you can crop the left offset 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 left offset in a cloned image, we use the left property.
Syntax
cloneAsImage( callback: function, { left: 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 other properties can be changed of which left is a property.
Options Keys
left ? This property accepts a Number value which denotes left offset that has to be cropped. This property is optional.
Without using the left property
Let's see a code example of how the cloned Image object appears when the left 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 left 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 left property
In this example, we have used the left property and passed it a value 100 which is cropping left offset for the clone image. Therefore, the left portion will 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>Using the left 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 left property
image.cloneAsImage(
function(Img) {
Img.set("top", 150);
Img.set("left", 150);
canvas.add(Img);
}, {
left: 100,
}
);
</script>
</body>
</html>
How It Works
When you specify the left property in the options object of cloneAsImage(), it crops the specified number of pixels from the left side of the cloned image. The cropped portion is permanently removed from the cloned image data, creating a smaller image that starts from the specified left offset.
Conclusion
The left property in FabricJS cloneAsImage() method allows you to crop the left portion of cloned images. This is useful for creating focused views or removing unwanted sections from image clones.
348 Views
