FabricJS 2 - toile sérialisation JSON

Question

Je suis sérialisation ma toile à JSON et face à 2 problèmes:

La largeur et la hauteur de ma toile ne sera pas sérialisé mais je besoin de cela.

Lorsqu'une couleur ordinaire et une image en arrière-plan sont sérialisées, un dégradé en arrière-plan ne sera pas sérialisé. Je crée mon background-gradient comme ceci:

$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

Vous pouvez générer json comme ceci.

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

Si vous souhaitez enregistrer, vous pouvez faire comme objet de name et size cela.

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