javascript - 从 Json 加载 FabricJS

Question

我正在尝试从文本区域加载对象，下面显示了我的代码(带有导出代码)，但我不知道如何从json加载。任何人都可以帮忙吗？我在互联网上搜索了类似的示例，但除了 kitchensink json 选项卡上的示例之外，我找不到其他示例。

// to JSON string
$("#canvas2json").click(function(){

    canvas.isDrawingMode = false;

    if(!window.localStorage){alert("This function is not supported by your browser."); return;}

    var json = JSON.stringify(canvas);
    //canvas.renderAll();
    $("#myTextArea").text(json);

});


// from JSON string
$("#loadJson2Canvas").click(function(){


var jsonLoad = "'" + document.getElementById("myTextArea")+ "'";

//alert(jsonLoad).value;

canvas = window.canvas = new fabric.Canvas('canvas');

canvas.loadFromJSON(jsonLoad, canvas.renderAll.bind(canvas));


});

Answer 1

您的脚本中的问题是以下语句:

var jsonLoad = "'" + document.getElementById("myTextArea")+ "'";

这不会返回 textarea 的内容，而是返回 DOM 元素，以及 .toString 结果。由于您使用的是 jQuery，您可以执行类似的操作

$("#myTextArea").val()

所以:

$(function() {
  var canvas = new fabric.Canvas('c');
  /*
  canvas.add(new fabric.Circle({
    radius: 50,
    left: 0,
    top: 0,
    fill: '#0B61A4'
  }));
  */

  $("#canvas2json").click(function() {
    var json = canvas.toJSON();
    $("#myTextArea").text(JSON.stringify(json));
  });
  $("#loadJson2Canvas").click(function() {
    canvas.loadFromJSON(
      $("#myTextArea").val(),
      canvas.renderAll.bind(canvas));

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='c' width=300 height=150></canvas>
<br/>
<button id='canvas2json'>canvas2json</button>
<button id='loadJson2Canvas'>loadJson2Canvas</button>
<br/>
<textarea id='myTextArea'></textarea>