CODEWITHSUNDEEP
javascriptcanvasfabricjs
Sandor Rozsa
Sandor Rozsa

Reputation: 193

FabricJS 2 – serializing canvas to JSON

I am serializing my canvas to JSON and facing 2 problems:

The width and height of my canvas will not be serialized but I would need that.

While a plain color and an image as canvas background will be serialized, a gradient as background will not be serialized. I am creating my background-gradient like this:

$scope.addGradient = function (left, right) {
    var leftColor = document.getElementById('gradLeft').value;
    var rightColor = document.getElementById('gradRight').value;
    console.log(leftColor, rightColor);

    var grad = new fabric.Gradient({
        type: 'linear',
        coords: {
            x1: 0,
            y1: 0,
            x2: canvas.width,
            y2: canvas.height,
        },
        colorStops: [{
            color: leftColor,
            offset: 0,
        },
            {
                color: rightColor,
                offset: 1,
            }
        ]
    });
    canvas.backgroundColor = grad.toLive(canvas.contextContainer);
    canvas.renderAll();
};

Upvotes: 1

Views: 2867

Answers (1)

artgb
artgb

Reputation: 3233

You can generate json like this.

GenerateCanvasJson(){
  return{
    leftColor: document.getElementById('gradLeft').value,
    rightColor: document.getElementById('gradRight').value,
    canvasWidth: canvas.original.width,
    canvasHeight: canvas.original.height,
    state: canvas.toJSON()
  }
}

If you want to save object's name and size you can do like this.

GenerateCanvasJson(){
  return{
    leftColor: document.getElementById('gradLeft').value,
    rightColor: document.getElementById('gradRight').value,
    canvasWidth: canvas.original.width,
    canvasHeight: canvas.original.height,
    state: canvas.toJSON('name', 'size')
  }
}

Upvotes: 5

Related Questions