在页面上保存/加载 JSON答案

【问题标题】：Saving/Loading JSON on Page在页面上保存/加载 JSON
【发布时间】：2018-08-09 17:37:03
【问题描述】：

我想为单个画布创建一个保护程序/加载程序，like on the Fabric.js example website（请参阅 JSON 选项卡）。我可以通过以下方式获取我的 JSON (kudos Durga) 并将其加载到画布中：

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>

我将如何在页面上获取 JSON，以便我可以像示例中一样保存/加载它？

【问题讨论】：

您只需要两个按钮来保存/加载还是要将其保存在数据库中？
@Durga 嗨，我想学习如何将包含任何内容（绘图、图像）的画布保存到数据库并恢复它

标签： javascript fabricjs

【解决方案1】：

对于任何看到这篇文章的人，我最终得到了a solution (here's the JSFiddle)：

$(function() {
  var canvas = new fabric.Canvas('c', {
    /* isDrawingMode: true */
  });

  $('#text').on('click', addtext);

  function addtext() {
    var text = new fabric.IText('Some Text!', {
      left: 10,
      top: 10
    });
    canvas.add(text);
  }

  // From Computer
  document.getElementById('imgLoader').onchange = function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function(event) {
      console.log('fdsf');
      var imgObj = new Image();
      imgObj.src = event.target.result;
      imgObj.onload = function() {
        // start fabricJS stuff

        var image = new fabric.Image(imgObj);
        image.set({
          left: 0,
          top: 0,
          angle: 20,
          padding: 10,
          cornersize: 10
        });
        //image.scale(getRandomNum(0.1, 0.25)).setCoords();
        image.scale(0.2);
        canvas.add(image);

        // end fabricJS stuff
      }

    }
    reader.readAsDataURL(e.target.files[0]);
  }

  //

  var myImg = 'https://i.imgur.com/q2oGjQ9.jpg';

  $('#addImage').on('click', addImg);

  function addImg() {
    fabric.Image.fromURL(myImg, function(oImg) {
      oImg.scale(0.2);
      canvas.add(oImg);
    });
  }

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

  });
});

#myTextArea {
  width: 200px;
  height: 200px;
}

canvas {
  border: 1px solid black
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<button id="text">Add Text</button>

<input type="button" id="addImage" value="Add Web IMG">
<input type="file" id="imgLoader">

<br/><br/>

<canvas id='c' width=500 height=500></canvas>

<br/>

<button id='canvas2json'>canvas2json</button>
<button id='loadJson2Canvas'>loadJson2Canvas</button>

<br/><br/>

<textarea id='myTextArea' onfocus="this.select();" onmouseup="return false;"></textarea>

【讨论】：