Add Filters to Images using FabricJS- Part 2

Previously we saw how we can create high saturation or grayscale images. Let’s continue on the note of adding image filters to images added to the canvas by using FabricJS.

Previous article: Create high saturation or grayscale images using FabricJS

Changing the brightness of Images in FabricJS

Let’s see how we can change the brightness of images by using image filters. Here is our original image that we want to work with:

Original Image

On adding the image filter and increasing the brightness, our image should look like this:

Brighness Increased

• We create an instance of fabric.Image.filters.Brightness by using the new keyword.
• In its optional options Object, I have passed the brightness property a value of 0.5. It’s value ranges from -1 to 1.
• Finally, I’ve added it to the filters array by using the push() method.
• The applyFilters() method applies the brightness filter and re-renders the canvas after it.

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

      fabric.Image.fromURL(
        "https://images.unsplash.com/photo-1485119502162-016e4409beab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&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 the image filter
          img.filters.push(
            new fabric.Image.filters.Brightness({
              brightness: 0.5,
            })
          );

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

Make sure you add this line:

{ crossOrigin: "anonymous" }

This makes sure that the cross-origin resource sharing request is handled. The crossOrigin property when set to “anonymous” requests CORS headers such that there is no exchange of user-credentials. This means when we want an image to be loaded from a foreign origin (from a different website, in this case) in our canvas, it will behave as if it has been loaded from current origin.

You can read more about allowing cross-origin use of images, here.

In case you’ve not added crossOrigin: “anonymous”, you might get an error like this:

Error in console

Adding the Noise image filter

In order to add noise to our images we use the noise filter class. Adding noise to our images makes it look grainy which usually results from random variation of image density or uneven brightness.

• We can add noise by initiating an instance of fabric.Image.filters.Noise.
• Furthermore in its optional options Object, we use the noise property, which accepts a Number value, in order to control how much noise we want in our image.
• So we can simply add the following code in order to add noise:

   // Adding noise to our previous image
          img.filters.push(
            new fabric.Image.filters.Noise({
              noise: 200,
            })
          );

          img.applyFilters();

The image will now appear a lot more grainy than it originally was.

Noise added to an image by using FabricJS

I hope that helped, everyone! I’ll see ya in the next one~