Advanced Image Manipulation Techniques in JavaScript using Fabric.js for XR

Fabric.js provides a rich set of features for advanced image manipulation in the browser. Whether you need to crop, resize, rotate, or apply filters, Fabric.js makes it easy to perform these operations with a simple API.

Explore Here (No Login)

Blog> Categories: XR, Libraries

Table of Contents

Introduction to Fabric.js and Image Processing #

What is Fabric.js? #

Fabric.js is a powerful and versatile JavaScript library for working with HTML5 canvas. It provides an object model for canvas elements, making it easier to create, manipulate, and render graphics on the web. Fabric.js is widely used in web applications for creating dynamic, interactive graphics.

Key Features of Fabric.js:

  1. Object Model: Facilitates creation and manipulation of canvas elements as objects, such as rectangles, circles, and images.
  2. Interactivity: Supports interactive features like dragging, scaling, and rotating objects on the canvas.
  3. Cross-Browser Compatibility: Ensures consistent performance across all modern web browsers.
  4. Serialization: Allows saving and restoring canvas states through JSON, making it easy to save and share designs.
  5. Extensibility: Easily extendable to add custom objects, controls, and functionalities.

Resources:

Image Processing with Fabric.js #

Fabric.js supports various image processing functionalities, allowing manipulation of images directly on the canvas. This includes loading images, applying filters, and transforming images.

Loading and Manipulating Images: Fabric.js can load images from URLs and manipulate them on the canvas. You can set properties such as position, scale, rotation, and opacity to control how the image appears.

Applying Filters: Fabric.js allows the application of image filters such as grayscale, sepia, brightness, and more. These filters can be applied to images to achieve various visual effects, making it a valuable tool for image editing applications.

Examples of Image Processing Applications:

  • Photo Editing Tools: Create web-based photo editors that allow users to crop, resize, and apply filters to their images.
  • Interactive Design Apps: Develop applications where users can design graphics and images interactively.
  • Online Collage Makers: Build tools that let users combine multiple images and manipulate them to create collages.

Applications of Fabric.js #

Fabric.js is used in a variety of applications due to its flexibility and powerful features:

  1. Graphic Design Tools: Web-based applications for creating and editing graphics.
  2. Interactive Infographics: Creating interactive data visualizations that users can manipulate.
  3. E-learning Platforms: Developing tools for drawing and annotating on digital whiteboards.
  4. Gaming: Building 2D games with interactive elements.
  5. XR (Extended Reality): Enhancing AR and VR experiences with interactive graphics and controls.

Loading and Displaying an Image Using Fabric.js #

Let’s start by loading and displaying an image on the canvas.

<script>
    const canvas = new fabric.Canvas('canvas');

    fabric.Image.fromURL('https://www.researchgate.net/profile/Irina-Gladkova/publication/253864235/figure/fig3/AS:668627082690571@1536424527359/The-image-shown-here-is-a-300-300-pixel-cropped-section-of-SEVIRI-Band-3-digital-counts.png', function(img) {
        img.set({
            left: 100,
            top: 100,
            angle: 0
        });
        canvas.add(img);
    });
</script>

This code initializes a Fabric.js canvas and loads an image from a URL, placing it on the canvas at specified coordinates.

Cropping an Image #

To crop an image, you can use the cropX, cropY, width, and height properties.

<script>
    fabric.Image.fromURL('https://www.researchgate.net/profile/Irina-Gladkova/publication/253864235/figure/fig3/AS:668627082690571@1536424527359/The-image-shown-here-is-a-300-300-pixel-cropped-section-of-SEVIRI-Band-3-digital-counts.png', function(img) {
        img.set({
            left: 100,
            top: 100,
            angle: 0,
            cropX: 50,
            cropY: 50,
            width: 200,
            height: 200
        });
        canvas.add(img);
    });
</script>

This code crops the image to a 200x200 square starting from (50, 50) on the original image.

Resizing an Image #

Resizing can be done by setting the scaleX and scaleY properties.

<script>
    fabric.Image.fromURL('https://www.researchgate.net/profile/Irina-Gladkova/publication/253864235/figure/fig3/AS:668627082690571@1536424527359/The-image-shown-here-is-a-300-300-pixel-cropped-section-of-SEVIRI-Band-3-digital-counts.png', function(img) {
        img.set({
            left: 100,
            top: 100,
            angle: 0,
            scaleX: 0.5,
            scaleY: 0.5
        });
        canvas.add(img);
    });
</script>

This resizes the image to half of its original size.

Rotating an Image #

Rotating an image is straightforward using the angle property.

<script>
    fabric.Image.fromURL('https://www.researchgate.net/profile/Irina-Gladkova/publication/253864235/figure/fig3/AS:668627082690571@1536424527359/The-image-shown-here-is-a-300-300-pixel-cropped-section-of-SEVIRI-Band-3-digital-counts.png', function(img) {
        img.set({
            left: 100,
            top: 100,
            angle: 45
        });
        canvas.add(img);
    });
</script>

This rotates the image by 45 degrees.

Applying Filters to an Image #

Fabric.js supports various image filters, such as grayscale, sepia, and brightness. Here’s how to apply a grayscale filter:

<script>
    fabric.Image.fromURL('https://www.researchgate.net/profile/Irina-Gladkova/publication/253864235/figure/fig3/AS:668627082690571@1536424527359/The-image-shown-here-is-a-300-300-pixel-cropped-section-of-SEVIRI-Band-3-digital-counts.png', function(img) {
        img.filters.push(new fabric.Image.filters.Grayscale());
        img.applyFilters();
        canvas.add(img);
    });
</script>

For brightness adjustment, use:

<script>
    fabric.Image.fromURL('https://www.researchgate.net/profile/Irina-Gladkova/publication/253864235/figure/fig3/AS:668627082690571@1536424527359/The-image-shown-here-is-a-300-300-pixel-cropped-section-of-SEVIRI-Band-3-digital-counts.png', function(img) {
        img.filters.push(new fabric.Image.filters.Brightness({ brightness: 0.05 }));
        img.applyFilters();
        canvas.add(img);
    });
</script>

You can chain multiple filters together:

<script>
    fabric.Image.fromURL('https://www.researchgate.net/profile/Irina-Gladkova/publication/253864235/figure/fig3/AS:668627082690571@1536424527359/The-image-shown-here-is-a-300-300-pixel-cropped-section-of-SEVIRI-Band-3-digital-counts.png', function(img) {
        img.filters.push(
            new fabric.Image.filters.Grayscale(),
            new fabric.Image.filters.Brightness({ brightness: 0.05 })
        );
        img.applyFilters();
        canvas.add(img);
    });
</script>

Applications of Image Manipulation with Fabric.js #

Fabric.js’s capabilities extend far beyond simple image loading and manipulation. Here are some practical applications of advanced image manipulation using Fabric.js:

1. Online Photo Editors #

Fabric.js can be used to build powerful online photo editors that allow users to upload, edit, and save images directly in the browser. Features such as cropping, resizing, rotating, and applying filters can be easily implemented.

2. Graphic Design Tools #

Create comprehensive graphic design tools where users can create and manipulate complex compositions, including text, shapes, and images. Fabric.js’s object-oriented approach makes it easy to manage multiple elements on the canvas.

3. Interactive Storytelling #

Develop interactive storytelling applications where users can manipulate images to create visual narratives. This can be particularly useful for digital comics, e-books, and educational materials.

4. Customizable Product Previews #

For e-commerce websites, Fabric.js can be used to build customizable product previews. Users can upload their images (e.g., logos or photos) to see how they would look on various products like t-shirts, mugs, or phone cases.

5. Digital Art Creation #

Enable digital artists to create and edit their artwork directly in the browser. Artists can use Fabric.js to draw, paint, and manipulate images, with support for layers, brushes, and filters.

6. Interactive Infographics #

Fabric.js can be used to create interactive infographics that allow users to manipulate data visualizations. This can include resizing, rotating, and editing elements to better understand the information presented.

7. Educational Tools #

Develop educational tools that allow students to interact with images for learning purposes. For example, students can annotate images, highlight important areas, and apply filters to enhance their understanding of the subject matter.

8. Virtual Scrapbooks #

Create virtual scrapbooking applications where users can combine images, text, and decorative elements to create digital scrapbooks. Users can manipulate each element to design their pages creatively.

9. Game Development #

Fabric.js can be used in the development of 2D games where image manipulation is required. This includes sprite creation, animation, and dynamic changes to game assets based on user interactions.

10. Medical Imaging #

In medical applications, Fabric.js can be used to manipulate medical images such as X-rays or MRIs. This includes zooming, rotating, and applying filters to enhance image analysis and diagnosis.

Example Application: Online Photo Editor #

Here’s an example of how you might implement some basic features of an online photo editor using Fabric.js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fabric.js Photo Editor</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
    <style>
        canvas {
            border: 1px solid black;
        }
        #controls {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Fabric.js Photo Editor</h1>
    <canvas id="canvas" width="800" height="600"></canvas>
    <div id="controls">
        <button id="rotate">Rotate</button>
        <button id="grayscale">Grayscale</button>
        <button id="brightness">Brightness</button>
    </div>
    <script>
        const canvas = new fabric.Canvas('canvas');

        // Load image
        fabric.Image.fromURL('https://via.placeholder.com/300', function(img) {
            img.set({
                left: 100,
                top: 100
            });
            canvas.add(img);

            // Rotate image
            document.getElementById('rotate').addEventListener('click', function() {
                img.set('angle', img.get('angle') + 45);
                canvas.renderAll();
            });

            // Apply grayscale filter
            document.getElementById('grayscale').addEventListener('click', function() {
                img.filters.push(new fabric.Image.filters.Grayscale());
                img.applyFilters();
                canvas.renderAll();
            });

            // Apply brightness filter
            document.getElementById('brightness').addEventListener('click', function() {
                img.filters.push(new fabric.Image.filters.Brightness({ brightness: 0.05 }));
                img.applyFilters();
                canvas.renderAll();
            });
        });
    </script>
</body>
</html>

In this example, the basic functionality for rotating an image and applying grayscale and brightness filters is implemented, demonstrating how Fabric.js can be used to create an online photo editor. Experiment with Fabric.js here: JavaScript Notebook for Fabric.js.

Fabric.js Documentation Overview #

Classes and Objects in Fabric.js #

Canvas Class: The Canvas class in Fabric.js represents the main canvas element where graphics and objects are rendered and manipulated. It serves as the core component for interactive graphics applications on HTML5 canvas.

  • Functionality: Manages rendering, object manipulation, and user interactions.
  • Key Features:
    • Allows adding, removing, and manipulating graphical objects such as shapes, images, and text.
    • Supports interactive features like scaling, rotating, and dragging objects.
    • Provides methods for handling events like mouse interactions (mouse:down, mouse:move, etc.).

StaticCanvas Class: The StaticCanvas class is similar to the Canvas class but is designed for non-interactive rendering of static content. It is useful for displaying pre-rendered images or graphics without user interaction.

  • Functionality: Renders static content that does not require user interaction.
  • Key Features:
    • Optimized for rendering large or complex scenes that do not change dynamically.
    • Suitable for applications where interactivity is not required, such as displaying static diagrams or images.

Key Methods and Functions #

Initialization

  • fabric.Canvas(element [, options]): Initializes a new Canvas instance with the specified HTML element and optional configuration options.

Object Manipulation

  • add(object): Adds a graphical object to the canvas.
  • remove(object): Removes a specified object from the canvas.
  • getObjects(): Retrieves an array of all objects currently on the canvas.

Event Handling

  • on(event, handler): Attaches an event handler to canvas events such as mouse interactions (mouse:down, mouse:move, etc.).

Serialization and Deserialization

  • toJSON(): Serializes the current state of the canvas into a JSON string representation.
  • loadFromJSON(json, callback): Loads canvas state from a JSON string, optionally calling a callback function upon completion.

Filters and Effects #

Image Filters

  • filters: Fabric.js includes built-in filters like Grayscale, Sepia, Brightness, etc., which can be applied to image objects on the canvas.
  • applyFilters(callback, filters): Applies selected filters to an image object, optionally invoking a callback function after applying the filters.

Alternatives to Fabric.js #

Here are some alternatives to Fabric.js for working with HTML5 canvas:

  1. Konva.js
    • Description: An open-source 2D canvas library for desktop and mobile applications.
    • Key Features: Supports high-performance shape rendering, event handling, animations, and layering.
    • Website: Konva.js
    • GitHub: Konva GitHub
  2. Paper.js
    • Description: A vector graphics scripting framework that runs on top of the HTML5 canvas.
    • Key Features: Focuses on vector graphics manipulation, animations, and complex interactions.
    • Website: Paper.js
    • GitHub: Paper.js GitHub
  3. EaselJS
    • Description: Part of the CreateJS suite, EaselJS provides a straightforward API for working with HTML5 canvas.
    • Key Features: Offers display objects, graphics, tweens, and a hierarchical structure for managing objects.
    • Website: EaselJS
    • GitHub: EaselJS GitHub
  4. Two.js
    • Description: A two-dimensional drawing API for the modern web, built on top of SVG and HTML5 canvas.
    • Key Features: Focuses on rendering shapes and paths with a minimalistic API.
    • Website: Two.js
    • GitHub: Two.js GitHub
  5. PixiJS
    • Description: A fast, lightweight 2D rendering library that uses WebGL and falls back to HTML5 canvas.
    • Key Features: Designed for gaming and interactive applications, supports WebGL shaders, sprite sheets, and filters.
    • Website: PixiJS
    • GitHub: PixiJS GitHub
✎