CODEWITHSUNDEEP
javascriptjsonfabricjs
Wayne Gilliver
Wayne Gilliver

Reputation: 135

Load From Json fabricJS

I am trying to load an object from a textarea, below shows my code (with the export code) but I can't work out how to loadfromjson. Could anyone help please. I have scoured the internet looking for a similar example, but I cannot find one except the one on the kitchensink json tab.

// 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));


});

Upvotes: 0

Views: 3449

Answers (1)

invernomuto
invernomuto

Reputation: 10221

The problem in your script is the following statement:

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

this not return the content of your textarea, but the DOM element, and so the .toString result. Since you are using jQuery you could do something like

$("#myTextArea").val()

and so:

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

Upvotes: 2

Related Questions