How to transform a stringified JSON object back into FabricJS (Deserialize)

Question

How to transform a stringified JSON object back into FabricJS (Deserialize)

In my JSON data, there is a canvas object with properties like type, originX, originY, and more.

{"type":"rect",
"originX":"left",
"originY":"top",
"left":100,
"top":100,
"width":200,
"height":200,
"fill":"blue",
"stroke":null,
"strokeWidth":1,
"strokeDashArray":null,
"strokeLineCap":"butt",
"strokeLineJoin":"miter",
"strokeMiterLimit":10,
"scaleX":1,"scaleY":1,
"angle":0,
"flipX":false,
"flipY":false,
"opacity”:1,
”shadow":null,
"visible":true,
"clipTo":null,
"backgroundColor":"",
"fillRule":"nonzero",
"globalCompositeOperation":"source-over",
"transformMatrix":null,
"skewX":0,
"skewY":0,
"rx":0,
"ry":0}

Is there a way to deserialize this object so I can add it back to the canvas using canvas.add()?

I prefer not to use canvas.loadFromJSON() because it will clear the current content on the canvas.

javascript json canvas

Answer 1

Answer №1

Unfortunately, the canvas.loadFromJSON() function clears the canvas before loading new objects. One workaround is to try the following approach:

var canvas;

        var json = '{"objects": [{"type":"rect", "left":100, "top":100, "width":200, "height":200, "fill":"blue"}]}';
        canvas = new fabric.Canvas('c');

        // Create an object that won't be overwritten when loading JSON
        var circle = new fabric.Circle({
            radius: 50, fill: 'green', left: 50, top: 50
        });
        canvas.add(circle);
        canvas.renderAll();

        // Parse JSON and add objects to canvas
        var jsonObj = JSON.parse(json);
        fabric.util.enlivenObjects(jsonObj.objects, function (enlivenedObjects) {
            enlivenedObjects.forEach(function (obj, index) {
                canvas.add(obj);
            });
            canvas.renderAll();
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>

<canvas id="c" width="600" height="400">    </canvas>

You can also use the following code to add just one object from JSON:

var json = '{"type":"rect", "left":100, "top":100, "width":200, "height":200, "fill":"blue"}';
        canvas = new fabric.Canvas('c');

        // Create an object to show that this doesn't get overwritten when we load the JSON
        var circle = new fabric.Circle({
            radius: 50, fill: 'green', left: 50, top: 50
        });
        canvas.add(circle);
        canvas.renderAll();

        // Parse JSON and single object to canvas
        var jsonObj = JSON.parse(json);
        fabric.util.enlivenObjects([jsonObj], function (enlivenedObjects) {
            canvas.add(enlivenedObjects[0]);
            canvas.renderAll();
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
    <canvas id="c" width="600" height="400"></canvas>

Answer 2

Unfortunately, the canvas.loadFromJSON() function clears the canvas before loading new objects. One workaround is to try the following approach:

var canvas;

        var json = '{"objects": [{"type":"rect", "left":100, "top":100, "width":200, "height":200, "fill":"blue"}]}';
        canvas = new fabric.Canvas('c');

        // Create an object that won't be overwritten when loading JSON
        var circle = new fabric.Circle({
            radius: 50, fill: 'green', left: 50, top: 50
        });
        canvas.add(circle);
        canvas.renderAll();

        // Parse JSON and add objects to canvas
        var jsonObj = JSON.parse(json);
        fabric.util.enlivenObjects(jsonObj.objects, function (enlivenedObjects) {
            enlivenedObjects.forEach(function (obj, index) {
                canvas.add(obj);
            });
            canvas.renderAll();
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>

<canvas id="c" width="600" height="400">    </canvas>

You can also use the following code to add just one object from JSON:

var json = '{"type":"rect", "left":100, "top":100, "width":200, "height":200, "fill":"blue"}';
        canvas = new fabric.Canvas('c');

        // Create an object to show that this doesn't get overwritten when we load the JSON
        var circle = new fabric.Circle({
            radius: 50, fill: 'green', left: 50, top: 50
        });
        canvas.add(circle);
        canvas.renderAll();

        // Parse JSON and single object to canvas
        var jsonObj = JSON.parse(json);
        fabric.util.enlivenObjects([jsonObj], function (enlivenedObjects) {
            canvas.add(enlivenedObjects[0]);
            canvas.renderAll();
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
    <canvas id="c" width="600" height="400"></canvas>

How to transform a stringified JSON object back into FabricJS (Deserialize)

Answer №1

Similar questions

Is it possible to use Newtonsoft.Json.Linq.JObject as an argument for parsing JSON data?

Use JavaScript to smoothly navigate through a dialog box displayed within the window by scrolling down

Tips for maintaining value in a PHP listbox

Tips for choosing and emphasizing specific lines in a dxf document with the help of three.js, dxf-parser, and three-dxf

Leveraging API data within React: A step-by-step guide

The jQuery.find() method will still return an object even if there are no child elements in the DOM that match the criteria specified

The UI Router template fails to inject despite state changes occurring

Change the value of a div element from a decimal number to an integer

How to modify and remove a card element in semantic UI with react coding

The iPhone numerical keyboard continues to appear even after submitting a form within an iFrame on iOS Safari

What is the best way to start up node.js and react?

Setting up your NODEJS Express Server to handle POST requests: A Step-by-Step Guide

Setting filters programmatically in Mui X Data Grid

When is it necessary to create a script that will dynamically apply a .current class (similar to active) to an element?

Comparing npm start and running the app with node app.js

What offers better performance: XmlHttpRequest response in HTML or JSON format?

Python JSON Schema Validation for Repeated JSON Responses

Using XmlHttpRequest to send a zipped file created with JSZip in JavaScript

Dealing with router parameters of an indefinite number in Angular 5: A comprehensive guide

Tips for managing player rounds updates