javascript - FabricJS 2 – 将 Canvas 序列化为 JSON

Question

我正在将 Canvas 序列化为 JSON，并面临两个问题:

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

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

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

如果你想保存对象的名称和大小你可以这样做。

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