How to get all information about Fabric.js canvas after user finished moving around?

Question

I have a canvas using Fabric.js where the user can move images around to make a design. How do i get all the data from each individual object so that i can recreate it in an image editor?

The canvas looks like this:

HTML

<div id="CanvasContainer">
    <canvas id="Canvas" width="270" height="519"></canvas>
</div>

JAVASCRIPT

//Defining Canvas and object array
var canvas = new fabric.Canvas('Canvas');
var canvasObject = new Array();

//When clicked
$(document).ready(function () {
    $("#Backgrounds img").click(function () {
        var getId = $(this).attr("id");

        //adding all clicked images
        var imgElement = document.getElementById(getId);
        var imgInstance = new fabric.Image(imgElement, {
            left: 135,
            top: 259,
            width: 270,
            height: 519
        });
        //Corner color for clicked images
        imgInstance.set({
            borderColor: 'white',
            cornerColor: 'black',
            transparentCorners: false,
            cornerSize: 12
        });
        canvas.add(imgInstance);
    });
});

$(document).ready(function () {
    $("#Extras img").click(function () {
        var getId = $(this).attr("id");

        //adding all clicked images
        var imgElement = document.getElementById(getId);
        var imgInstance = new fabric.Image(imgElement, {
            left: 135,
            top: 259,
            width: 270,
            height: 519
        });
        //Corner color for clicked images
        imgInstance.set({
            borderColor: 'white',
            cornerColor: 'black',
            transparentCorners: false,
            cornerSize: 12
        });
        canvas.add(imgInstance);
    });
});

//SideOptions------------
function deleteObject(){
    canvas.remove(canvas.getActiveObject());
}
function layerUpObject(){
    canvas.bringForward(canvas.getActiveObject());
}
function layerDownObject(){
    canvas.sendBackwards(canvas.getActiveObject());
}
function layerTopObject(){
    canvas.bringToFront(canvas.getActiveObject());
}
function layerBottomObject(){
    canvas.sendToBack(canvas.getActiveObject())
}

Thanks :)

Edit: Basically, i want the src, position, scale, rotation. Other data i guess can also be good but those 4 are the most important.

score 5 · Accepted Answer · answered Nov 17 '13 at 13:39

5

There are the methods toObject() and toJSON().

Look here how to serialize the canvas.

Example:

var canvas = new fabric.Canvas('c');
JSON.stringify(canvas); // '{"objects":[],"background":"rgba(0, 0, 0, 0)"}'
// or
// JSON.stringify(canvas.toJSON());

answered Nov 17 '13 at 13:39

bitWorking

12,485
1
32
38

There is also `toSVG` which can be very interesting to recreate the image in an vector based editor. – bitWorking Nov 17 '13 at 13:47
Cool, the default fabricjs canvas isn't vector based is it? – Arco_Pelago Nov 17 '13 at 13:51
fabricjs uses the html5 canvas element at its base which is raster-based. [http://en.wikipedia.org/wiki/Canvas_element](http://en.wikipedia.org/wiki/Canvas_element) – bitWorking Nov 17 '13 at 13:56
Is it possible to JSON.stringify only certain data? like for example only x-scale, y-scale, postion ect.? – Arco_Pelago Nov 17 '13 at 14:11
according to the doc there is an optional parameter `propertiesToInclude`. But the description states: `Any properties that you might want to additionally include in the output`. So you'll have to try it out: [http://fabricjs.com/docs/fabric.Canvas.html#toJSON](http://fabricjs.com/docs/fabric.Canvas.html#toJSON) – bitWorking Nov 17 '13 at 14:28
also try `canvas.includeDefaultValues = false;` – bitWorking Nov 17 '13 at 14:31

How to get all information about Fabric.js canvas after user finished moving around?

1 Answers1