FabricJs load previous/current step without using canvas.toJSON()

Question

I am using FabricJs to create an online image editor.

Is a simple thing, this actions: zoom, rotate, flipX, undo, redo.

I firstly tried to use the toJSON, and fromJSON, but I saw that when the user was clicking on the undo button fabricjs reloads the image, and also the configuration object that returns the canvas.toJSON() is pretty big and i want to store all the steps in a database.

I tried to create my own configuration object, storing only this properties:


    {
        filters: FabricFilter[];
        rotation: number;
        flipX: boolean;
        position: {
            top: number,
            left: number
        };
        zoom: number;
    }

The single mouse event is when the user move/fit the image in the canvas, all other actions are made programatically.

The problem I have is that when the user rotates an image, and then tries to apply a filter, the rotation is lost, or the image is out of the canvas.

I place here some code here:


    setConfig(canvasEl, imageEl, config) {
        if (config.hasOwnProperty('zoom')) {
            canvasEl.setZoom(config.zoom);
        }
        if (config.hasOwnProperty('flipX')) {
            imageEl.flipX = config.flipX;
        }
        if (config.hasOwnProperty('position')) {
            imageEl.top = position.top;
            imageEl.left = position.left;
        }
        if (config.hasOwnProperty('rotation')) {
            imageEl.angle = rotation;
        }
        if (config.hasOwnProperty('filters')) {
            imageEl.filters = config.filters;
            imageEl.applyFilters();
        }
    }

The problem is that I don't know how to store the configuration of a
fabric canvas(the same as toJSON, loadFromJSON, but with less properties), and then to update the canvas object, depending on the stored configuration.

Any help will be really appreciated. Maybe I didn't explain very good my problem, so if any of you don't understand something, I'll be more than happy to answer your questions, and edit the post.

Thank you

FabricJs load previous/current step without using canvas.toJSON()

0 Answers0