Add Filters to Images using FabricJS- Part 1

In my previous article I illustrated how we can create a group of three objects. In that example, the three objects were: text, circle and an image! So in this article, let’s see how we can add images to the canvas and also, add various filters to them.

Creating an instance of fabric.Image

In order to create an instance of fabric.Image, it is best to have that image hidden in our HTML by using the <img> tag. Passing the hidden attribute will hide the image for us like so:

 <img id="imgId" src="img.jpg" hidden />

You can see that I have passed it an image id called “imgId”. This is because we would need that id in order to initiate an image element.

After initiating the image element, we need to pass it as the first argument in fabric.Image. The second argument is an optional options Object where we can change properties related to the image.

      var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
        isDrawingMode: false,
      });

      // Initiating the image element
      var imageElement = document.getElementById("imgId");

      // creating an instance of fabric.Image
      var image = new fabric.Image(imageElement, {
        top: 20,
        left: 210,
        scaleX: 0.8,
        scaleY: 0.8,
        angle: 32,
      });

      // Adding it to the canvas
      canvas.add(image);

Image added to the canvas by creating an instance of fabric.Image

Using fabric.Image.fromURL()

We can also add images to the canvas by using the fromURL() method.

The fromURL method, as its name suggests, creates an instance of an image from a URL string.

• The first argument that it takes is going to be the URL string that we want to use as our image.
• The second argument is a callback function which is invoked when the image is created.
• The third argument is an optional options object.

This is how we can use the fromURL() method to add images to the canvas:

      fabric.Image.fromURL(
        "https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=869&q=80",
        function (img) {
          img.scale(0.45);
          img.set("top", 35);
          img.set("left", 20);
          canvas.add(img);
        }
      );

Adding an image to the canvas by using the fromURL() method

Applying Image Filters

In this new age of technology, everybody and their grandma 👵 knows what a filter is. And FabricJS allows us to not only create images but also add filters to them!

I will highly recommend you to always use the fromURL() method while working with filters.

Furthermore if you are facing any CORS issues then test opening the output in Firefox.

Creating a High Saturation Image

Can you see the image down below?

High Saturation image created using Saturation class in FabricJS

You must be like, “You’ve got to be kidding me! Of course I can see an image as bright as this! It’s brighter and redder than my tomato soup.”

A high saturation image is noted for its rich, vivid and intense coloring. The more saturated an image is, the less gray it will appear.

The code down below is to demonstrate how I got such an over saturated image. (The cat image that you can see right above)

• The first step is (obviously) to create the image instance which I have done by using the fromURL() method.
• Every instance of fabric.Image has a property called “filters”. This is nothing but an array of filters.
• Each of the items in this Array is an instance of a Fabric filter.
• In order to add the filter to our image instance, we need to use the push() method to add that filter at the end of the filters Array.
• Therefore the push() method will add an instance of fabric.Image.filters.Saturation to the filters Array!
• Since I have passed the saturation property a value of 2, the image appears more saturated.

      var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
        isDrawingMode: false,
      });

      var imgUrl =
        "https://images.unsplash.com/photo-1635365737298-3a64d9459d83?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=877&q=80";

      fabric.Image.fromURL(
        imgUrl,
        (img) => {
          img.filters.push(
            new fabric.Image.filters.Saturation({
              saturation: 2,
            })
          );
          img.applyFilters();
          img.scale(0.4);
          img.set("top", 30);
          img.set("left", 20);
          canvas.add(img);
        },
        { crossOrigin: "anonymous" }
      );

Creating a Grayscale Image

• In order to create a grayscale image, we need to push an instance of fabric.Image.filters.Grayscale() into the filters Array.
• The applyFilters() method applies the filters while also re-rendering the canvas when the job is done!

      var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
        isDrawingMode: false,
      });

      var imgUrl =
        "https://images.unsplash.com/photo-1635365737298-3a64d9459d83?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=877&q=80";

      fabric.Image.fromURL(
        imgUrl,
        (img) => {
          img.filters.push(new fabric.Image.filters.Grayscale());
          img.applyFilters();
          img.scale(0.4);
          img.set("top", 30);
          img.set("left", 20);
          canvas.add(img);
        },
        { crossOrigin: "anonymous" }
      );

This is the output for the above lines of code:

• By default, the grayscale mode is set as “average”. However we can change that by using the mode property like so:

   img.filters.push(
            new fabric.Image.filters.Grayscale({
              mode: "lightness", // The accepted values are: 'average', 'lightness', 'luminosity'
            })
          );

In the next article we will play around with more image filters. Till then, see ya~