Saving JSON as File + Loading JSON from File

Question

I have a FabricJS canvas (1.7.22) with a few buttons to add images and text. I also have a textarea which I can use to load the canvas JSON for copying and to load to the canvas for later editing.

I want to expedite the process by being able to save the canvas JSON as a file to my computer and be able to load the file onto the canvas later.

I feel like I have the essential functionality but how might I achieve the above for better usability?

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

Use localStorage to save data to your hard drive. For example

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

If you want to make it more flexible, such as with more load/save slots, then load/save from a container object such as myCanvases , assign to / get data from its values, and save the myCanvases object to localStorage instead.

Answer 2

Download the json using createObjectURL and then upload from browser and read the file using readAsText , FileReader api . then load JSON to canvas.

DEMO

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