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 change the source of an Image using FabricJS?
In this tutorial, we are going to learn how to change the source of an Image using FabricJS. Source can be a new url of image also. 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 change the source of an Image, we use the setSrc method.
Syntax
setSrc(src: String, callback: function, options: Object): fabric.Image
Parameters
src ? This parameter accepts a String which denotes the source url string.
callback (optional) ? This parameter is a function which is invoked when the image has been loaded and all the filters have been applied. This parameter is optional.
options (optional) ? This parameter is an Object which provides additional customizations to our image. This parameter is optional.
Default appearance of Image object
Let's see a code example to understand how the selection appears when the setSrc method is not used. As we can see from this example, we can add an image object to the canvas by using the fromURL method and specifying the source URL which we want to use.
<!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>Default appearance of Image object</h2>
<p>You can see that the image object has been added</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).renderAll();
}
);
</script>
</body>
</html>
Using the setSrc method
In this example, we are using the setSrc method to change the image. In this case, we are essentially updating the source pointing to the image of the object.
<!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 setSrc method</h2>
<p>You can click on the button to see that the image has been changed</p>
<button id="changeImageBtn">change image</button>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
var imageObject;
// Using fromURL method
fabric.Image.fromURL(
"https://www.tutorialspoint.com/images/logo.png",
function(Img) {
imageObject = Img;
canvas.add(Img).renderAll();
}, {
crossorigin: "anonymous"
}
);
// Using the setSrc method
document
.querySelector("#changeImageBtn")
.addEventListener("click", () => {
imageObject.setSrc(
"https://www.tutorialspoint.com/static/images/logo-color.png",
function() {
canvas.renderAll();
}
);
});
</script>
</body>
</html>
Key Points
- The
setSrcmethod dynamically changes the image source after the image object is created - A callback function is typically used to refresh the canvas after the new image loads
- The original image object properties (position, scale, angle) are preserved when changing the source
- You must store a reference to the image object to use
setSrclater
Conclusion
The setSrc method provides a convenient way to dynamically change image sources in FabricJS while preserving object properties. This is useful for creating interactive applications where images need to be swapped based on user actions.
2K+ Views
