How to change the source of an Image using FabricJS?

FabricJS Javascript HTML5 Canvas

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

Example

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

Example

In this example, we are using the setSrc property 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>

Conclusion

In this tutorial, we used two examples to demonstrate how you can change the source of an Image using FabricJS.

Rahul Gurung

Updated on: 26-Oct-2022

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started