fabric custom content

fabric custom content

by MULLAINATHAN MANICKAM

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 JSONData = '';
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");
    JSONData = JSON.stringify(canvas.toDatalessJSON(['id', 'alt']));
    console.log(JSONData);
  },
  clear : function(){
    console.log("calling clear");
    // clear canvas
    canvas.clear();
  },
  open : function(){
    console.log("calling open");
    // and load everything from the same json
    canvas.loadFromJSON(JSONData, canvasJSONCallBack, function(o, object) {
      console.log(JSONData);
      canvas.setActiveObject(object);
      console.log(object.id, object.alt);
    });
  }
}

function canvasJSONCallBack() {
    canvas.renderAll();
    canvas.calcOffset();
}