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

Question

我有一个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> 

Answer 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加载/保存，从其值分配/获取数据，然后将myCanvases对象保存到localStorage。

Answer 2

使用createObjectURL下载json，然后从浏览器上传并使用FileReader api readAsText读取文件。 然后将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>