SOF fabric custom content

SOF fabric custom content

by Ankur Jhawar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.1/fabric.js"></script>
<div>
    <canvas id="c" width="500" height="500"></canvas>
</div>
<div>
  <input type="button" id="loadFromUrl" value="load from url"/>
  <input type="button" id="save" value="save"/>
  <input type="button" id="clear" value="clear"/>
  <input type="button" id="open" value="open"/>
</div>

JavaScript

var src = 'https://www.google.com/images/srpr/logo3w.png';
var canvas = window.__canvas = new fabric.Canvas('c');

/**
	This just adds click event which is not the point here..
*/
$(document).on("click", "#loadFromUrl", function(){
	canvasOperations.loadFromUrl();
});

$(document).on("click", "#save", function(){
	canvasOperations.save();
});

$(document).on("click", "#clear", function(){
	canvasOperations.clear();
});

$(document).on("click", "#open", function(){
	canvasOperations.open();
});

var canvasOperations = {
  loadFromUrl : function(){
    console.log("calling loadFromUrl");
    fabric.Image.fromURL(src, function(image){
      canvas.add(image.set({
            id : 'abc',
            alt : 'xyz'
        }));
    });
  },
  save : function(){
    console.log("calling save");
    localStorage.setItem("canvas", JSON.stringify(canvas));
  },
  clear : function(){
    console.log("calling clear");
    // clear canvas
    canvas.clear();
  },
  open : function(){
    console.log("calling open");
    // and load everything from the same json
    var json = JSON.parse(localStorage.getItem("canvas"));
    canvas.loadFromJSON(json, function() {
      console.log(json);
      canvas.renderAll();
      console.log(canvas);
    });
  }
}