Jsonファブリックからロードする

Question

テキストエリアからオブジェクトをロードしようとしていますが、下のコードを（エクスポートコードで）表示していますが、loadfromjsonの仕組みを理解できません。誰でも助けてくれますか？私は同様の例を探してインターネットを洗ったが、キッチンシンク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の結果ではありません。完璧な答えのための

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