fabric 2.4 to JSON test

by maxim_torba

HTML

<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="c1"></canvas>
<button id="toJSON">to JSON</button> -> <button id="loadJSON">load from JSON</button>
<canvas id="c2"></canvas>

CSS

canvas {
  border: 1px solid #999;
}

JavaScript

(function() {
    //record clip_target & id
    fabric.Object.prototype.toObject = (function (toObject) {
        return function (propertiesToInclude) {
            propertiesToInclude = (propertiesToInclude || []).concat(
              ['clip_target','clip_id','absolutePositioned']
            );
            return toObject.apply(this, [propertiesToInclude]);
        };
    })(fabric.Object.prototype.toObject);
    
    fabric.Canvas.prototype.getItemByAttr = function(attr, name) {
      var object = null,
      objects = this.getObjects();
      for (var i = 0, len = this.size(); i < len; i++) {
          //console.log('objects[i][attr]=',objects[i][attr]);
          if (objects[i][attr] && objects[i][attr] === name) {
              object = objects[i];
              break;
          }
      }
      return object;
		};         
 
 var canvas = new fabric.Canvas('c1',{
  	width:500,
    height:300, 
    backgroundColor: "#ffffff",
  });
  var canvas2 = new fabric.Canvas('c2',{
  	width:500,
    height:300,
    backgroundColor: "#f9fc82"
  });

setTimeout(() => {
	console.log(canvas.toDataURL())
}, 2000);
// ADD YOUR CODE HERE
	var savedata;
	var clipPath = new fabric.Rect({ 
  		width: 100, height:100, top: 100, left: 150, fill: '#aaaaaa', 
      absolutePositioned: true, 
      clip_id: 'abc',
      });
  canvas.add(clipPath);
  
  fabric.Image.fromURL('http://fabricjs.com/assets/dragon2.jpg', function(img) {
  	var imgInstance = img.set({
    	clipPath:clipPath,
      scaleX: 0.2,
      scaleY:0.2,
      clip_target : 'abc',
      objectCaching: false,
    })
    canvas.add(imgInstance);
                      
  });
                        
  $("#toJSON").on('click', function(){
    savedata = JSON.stringify(canvas.toDatalessJSON());
  });
  
  $("#loadJSON").on('click', function(){
  
    var objects_data = savedata; // string
    var objects_obj = JSON.parse(objects_data);//object
    var objects_array = objects_obj['objects'];
    var obj_with_clipPath =...