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
FabricJS – How to get the image element on which the current instance is based on?
In this tutorial, we are going to learn how to get the image element on which the current instance is based on 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 get the image element on which the current instance is based on, we use the getElement method.
Syntax
getElement(): HTMLImageElement
Using the getElement Method
In this example, we have used the getElement method to obtain the image element on which the current instance is based on. You can open the console from dev tools to see the HTML image element being returned.
<!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 getElement method</h2>
<p>You can open the console from dev tools to see the logged output</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 an Image object
var image = new fabric.Image(imageElement, {
top: 50,
left: 110,
skewX: 15,
});
// Add it to the canvas
canvas.add(image);
// Using the getElement method
console.log(
"The image element on which the current instance is based on is as follows: ",
image.getElement()
);
</script>
</body>
</html>
The image element on which the current instance is based on is as follows: <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none">
Using the getElement Method with fromURL Method
Let's see a code example of the logged output when the getElement method is used in conjunction with fromURL method. Here, we will be able to see the image element returned in the console.
<!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 getElement method along with fromURL method</h2>
<p>You can open the console from dev tools to see the logged output</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Using fromURL method
fabric.Image.fromURL(
"https://www.tutorialspoint.com/images/logo.png",
function (Img) {
canvas.add(Img);
console.log(
"The image element on which the current instance is based on is as follows: ",
Img.getElement()
);
}
);
</script>
</body>
</html>
The image element on which the current instance is based on is as follows: <img src="https://www.tutorialspoint.com/images/logo.png">
Key Points
- The
getElement()method returns the underlying HTMLImageElement that the fabric.Image instance is based on - When using an existing DOM element,
getElement()returns the same element with all its attributes - When using
fromURL(), FabricJS creates a new image element internally, which is returned bygetElement() - This method is useful for accessing native image properties and methods that aren't directly exposed by the fabric.Image wrapper
Conclusion
The getElement() method provides access to the underlying HTML image element of a fabric.Image instance. This is particularly useful when you need to interact with native image properties or perform operations that require the raw DOM element.
858 Views
