FabricJS 2 – 将画布序列化为 JSON

Question

我正在将我的画布序列化为 JSON 并面临两个问题：

我的画布的宽度和高度不会被序列化，但我需要它。

虽然纯色和作为画布背景的图像将被序列化，但作为背景的渐变不会被序列化。我正在像这样创建我的背景渐变：

$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();
};

Answer 1

你可以像这样生成json。

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 你可以这样做。

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')
  }
}