fabric 2.4 to JSON test

by joepenzo

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() {
    
 
 var canvas = new fabric.Canvas('c1',{
  	width:500,
    height:300, 
  });
  var canvas2 = new fabric.Canvas('c2',{
  	width:500,
    height:300,
//    preserveObjectStacking:true
  });

// ADD YOUR CODE HERE
	var json;
	var clipping_obj = new fabric.Rect({ 
  		width: 100, height:100, top: 100, left: 150, fill: '#aaaaaa', 
      absolutePositioned: true, 
      clip_id: 'abc'
      });
  canvas.add(clipping_obj);
  
  fabric.Image.fromURL('http://fabricjs.com/assets/dragon2.jpg', function(img) {
  	var clipped_img = img.set({
    	clipPath:clipping_obj,
      scaleX: 0.2,
      scaleY:0.2,
      clip_target: 'abc'
    })
    canvas.add(clipped_img);      
  });
                        
  $("#toJSON").on('click', function(){
    json = canvas.toJSON(['clip_id', 'clip_target', 'absolutePositioned']);
  });
  
  $("#loadJSON").on('click', function(){
    json.objects.forEach(object => {
        if (object.clipPath) {
            fabric.util.enlivenObjects([object.clipPath], function(arg1) {
                object.clipPath = arg1[0];
            });
        }
    });
    canvas2.loadFromJSON(json, function() {
        canvas2.forEachObject(object => {
          if (object.clipPath) {
            let target = object.clip_target;
            canvas2.forEachObject(object2 => {
              if (object2.clip_id && object2.clip_id === target) {
                object.clipPath = object2;
              }
            });
          }
        });
        canvas2.renderAll.bind(canvas2);
      });
  });
 
 
  
})()