將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>