Add Filters to Images using FabricJS- Part 3

Today we’ll see how easy it is to apply contrast in images. We will also see how hue rotation effect can be achieved in FabricJS. So, let’s get right into it!

How to make an image high Contrast in FabricJS

Contrast in images determines the difference in tone or brightness between light and dark areas.

When we take a bright yellow and place it next to a blue color, we say that it has high contrast. This is because the difference of tones is extremely dramatic and can be easily distinguished by the human eye when they are placed next to each other.

Let’s see the original image that we are going to work with today:

An Image object added to the canvas by using the fromURL() method

We use the Contrast class of FabricJS in order to apply contrast to images loaded onto the canvas.

• The first step is to add the image that we want by using the fromURL() method.
• We also need to set crossOrigin as “anonymous” in order to avoid any exceptions.
• Lastly, we create an instance of fabric.Image.filters.Contrast and add that to the filters array by using the push() method.
• You can see I have followed the above steps in the code example below.

Previous article: Change the brightness or add Noise to Images in Canvas

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

      fabric.Image.fromURL(
        "https://images.unsplash.com/photo-1471922694854-ff1b63b20054?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80",
        function (img) {
          img.scale(0.45);
          img.set("top", 15);
          img.set("left", 200);
          img.set("originX", "center");
          img.set("originY", "top");

          // Adding contrast to our image
          img.filters.push(
            new fabric.Image.filters.Contrast({
              contrast: 0.3,
            })
          );

          img.applyFilters();
          canvas.add(img);
        },
        { crossOrigin: "anonymous" }
      );

You can see the output image below:

Image with high contrast

You can see in the above image that the difference in tone and brightness between the light and dark areas is considerably high.

It should also be noted that:

• I have passed the contrast property a value of 0.3 in the optional options Object.
• The contrast property takes up a Number value anywhere between -1 to 1 which controls the contrast of the image.
• The default value of contrast property is 0.

Adding the Hue rotation effect using FabricJS

Hue is used to refer to the pure spectrum of colors. It doesn’t signify the brightness of a color but instead it’s a single value denoting the pure color of something.

The pure spectrum of colors can be seen in the color wheel or more commonly, the rainbow.

You can read this really cool article in order to better understand Hue, Value and Color!

In order to achieve the hue rotation effect, we use the hue rotation class of FabricJS.

Just how we created an instance of the Contrast class in the previous example, we need to create an instance of fabric.Image.filters.HueRotation and add it to the filters Array.

We also need to pass the rotation property a Number value which lies anywhere between -1 and 1. This is the hue rotation value that we want in radians.

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

      fabric.Image.fromURL(
        "https://images.unsplash.com/photo-1471922694854-ff1b63b20054?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80",
        function (img) {
          img.scale(0.45);
          img.set("top", 15);
          img.set("left", 200);
          img.set("originX", "center");
          img.set("originY", "top");

          // Applying the hue rotation effect
          img.filters.push(
            new fabric.Image.filters.HueRotation({
              rotation: 0.5,
            })
          );

          img.applyFilters();
          canvas.add(img);
        },
        { crossOrigin: "anonymous" }
      );

You can see the output image down below:

Hue rotation effect using FabricJS