将JSON保存为文件+从文件加载JSON

时间:2018-03-30 06:01:34

标签: javascript fabricjs

我有一个FabricJS画布(1.7.22),带有几个按钮来添加图像和文本。我还有一个textarea,我可以使用它来加载画布JSON进行复制并加载到画布以供以后编辑。

我希望能够将画布JSON作为文件保存到我的计算机中,并且稍后能够将文件加载到画布上,从而加快该过程。

我觉得自己拥有必要的功能但是如何才能实现上述目标以获得更好的可用性?



$(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]);
  }

  // Add Web IMG
  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
  $("#canvas2json").click(function() {
    var json = canvas.toJSON();
    $("#myTextArea").text(JSON.stringify(json));
  });

  // load json2canvas
  $("#loadJson2Canvas").click(function() {
    canvas.loadFromJSON(
      $("#myTextArea").val(),
      canvas.renderAll.bind(canvas));
  });
});

#myTextArea {
  width: 90%;
  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'>2JSON</button>
<button id='loadJson2Canvas'>2CANVAS</button>

<br/><br/>

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

2 个答案:

答案 0 :(得分:1)

使用localStorage将数据保存到硬盘。例如

$("#canvas2json").click(function() {
  localStorage.myFabricJSCanvas = JSON.stringify(canvas.toJSON());
  $("#myTextArea").text('Saved');
});
$("#loadJson2Canvas").click(function() {
  canvas.loadFromJSON(
    JSON.parse(localStorage.myFabricJSCanvas),
    canvas.renderAll.bind(canvas)
  );
});

如果要使其更灵活,例如使用更多加载/保存槽,则从myCanvases等容器对象加载/保存,从其值分配/获取数据,并保存{ {1}}反而改为localStorage。

答案 1 :(得分:1)

使用createObjectURL下载json,然后从浏览器上传并使用readAsText,FileReader api读取文件。然后将JSON加载到画布。

<强> 样本

$(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]);
  }

  // Add Web IMG
  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
  $("#canvas2json").click(function() {
    var json = canvas.toJSON();
    $("#myTextArea").text(JSON.stringify(json));
    var a = document.createElement("a");
    var file = new Blob([JSON.stringify(json)], {
      type: 'text/plain'
    });
    a.href = URL.createObjectURL(file);
    a.download = 'json.txt';
    a.click();
  });

  // load json2canvas
  $("#loadJson2Canvas").click(function() {
    canvas.loadFromJSON(
      $("#myTextArea").val(),
      canvas.renderAll.bind(canvas));
  });
  $('#jsonload').change(function(e) {
    var file = e.target.files[0];
    if(!file) return;
    var reader = new FileReader();
    reader.onload = function(f) {
      var data = f.target.result;
      canvas.loadFromJSON(
      JSON.parse(data),
      canvas.renderAll.bind(canvas));
    };
    reader.readAsText(file);
    });
    $(this).val(null);
    return;
});
#myTextArea {
  width: 90%;
  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>upload json<input type="file" id="jsonload" />

<br/><br/>

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

<br/>

<button id='canvas2json'>2JSON</button>
<button id='loadJson2Canvas'>2CANVAS</button>

<br/><br/>

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