代码之家 › 专栏 › 技术社区 › anonymoose

更新JSON。字符串化(画布);最新画布更改

fabricjs javascript

anonymoose · 技术社区 · 6 年前

我希望能够记录和捕获我的织物。js公司 canvas 最新的变化。目前,使用 console.log(JSON.stringify(canvas)); 例如,我可以看到它会推送背景色,但不会推送其他任何东西,比如我添加的图纸等。

这可能吗?如果可能的话,我如何才能做到这一点?

var canvas = this.__canvas = new fabric.Canvas('canvas', {
  backgroundColor: 'white',
  centeredScaling: true,
  isDrawingMode: true
});

console.log(JSON.stringify(canvas));

body {
}

canvas {
  border-radius: 2px;
  margin: 5px;
  border:1px solid #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<canvas id="canvas" height="400" width="400"></canvas>

旁白:

我的最终目标是最终能够在以后将此JSON加载回画布,因此我想学习如何将最新的对象放入JSON中。 我是在正确的轨道上,还是我误解了这一点?

提前谢谢。

1 回复 | 直到 6 年前

Durga 6 年前

使用 toJSON 创建画布的JSON并使用 loadFromJSON .

演示

var canvas = new fabric.Canvas('canvas', {
  backgroundColor: 'white',
  centeredScaling: true,
  isDrawingMode: true
});

var canvas1 = new fabric.Canvas('canvas1');

function loadOnCanvas(){
 var json = canvas.toJSON();
 console.log(json)
 canvas1.loadFromJSON(json,canvas1.renderAll.bind(canvas1));
}

body {
}

canvas {
  border-radius: 2px;
  margin: 5px;
  border:1px solid #000000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<button onclick='loadOnCanvas()'>Load</button>
<canvas id="canvas" height="400" width="400"></canvas><br>
<canvas id="canvas1" height="400" width="400"></canvas>