从 Json fabricJS 加载

Question

我正在尝试从 textarea 加载对象，下面显示了我的代码（带有导出代码），但我不知道如何从 json 加载。任何人都可以帮忙吗？我在网上搜索了一个类似的例子，但除了厨房水槽 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>