loadFromJSON test

by SooChangLee

HTML

<input type="file" id="file" accept="image/*">
<br>
select image
<div class="div_background">
  <canvas id="html_canvas_source" width="500" height="700"></canvas>  
</div>

toSVG() result : please select image
<div class="div_background">
  <canvas id="html_canvas_target" width="500" height="700"></canvas>
</div>

<script src="http:///mac.soochang.pe.kr:8080/common/library/fabric.js-1.7.19/dist/custom/fabric.min.js"></script>

CSS

canvas {
	background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAB1JREFUGBljZGBgkARiogBRCpmIMgqoaFQh3pACAFoHAEQoNnJ9AAAAAElFTkSuQmCC
	) repeat;
}
.div_background {
  width: 500px;
  border-style: dashed; 
  border-width: 1px;
  margin-bottom: 10px;
}

JavaScript

function init_canvas(){
  canvas_source.clear();
  canvas_target.clear();
  
  canvas_source.add(group_device_back);
}

function select_image(file){
	init_canvas();	

  var readerDataUrl = new FileReader();
  readerDataUrl.onload = function(e_bin) {
		fabric.Image.fromURL(e_bin.target.result, function(img) {
      var scale = group_device_back.width / img.width;
      
      img.set({ 
        left: group_device_back.left, 
        top: group_device_back.top,
        scaleX: scale,
        scaleY: scale,
        selectable: false,
    		svented: false
      });
      
      canvas_source.add(img);
      
      group_device_back.bringToFront();
      
      canvas_source.renderAll();
      
      toJson();
    });        
  };
  readerDataUrl.readAsDataURL(file);
};

function toJson(){
	var json = JSON.stringify(canvas_source.toJSON(["selectable", "evented"]));
  console.log(json);
  
	canvas_target.loadFromJSON('', function(){
			canvas_target.renderAll.bind(canvas_target);

			canvas_target.renderAll();
		}), function(o, object){
			console.log(456);
		};
}

var canvas_source;
var canvas_target;

var rect;
var group_device_back;

fabric.InsetShadowRect = fabric.util.createClass(fabric.Rect, {
  type: 'insetShadowRect',
  initialize: function(options) {
    options || (options = { });

    this.callSuper('initialize', options);
  },
  toObject: function() {
    return fabric.util.object.extend(this.callSuper('toObject'), {

    });
  },
  _render: function(ctx) {
    this.callSuper('_render', ctx);

    ctx.save();
    ctx.clip();

    ctx.shadowColor = '#000000';

    var shadowBlur = 25;
    var shadowDepth = 2;

    for(var i=0 ; i<shadowDepth ; i++){
      ctx.shadowBlur=shadowBlur;
      ctx.stroke();
    }

    ctx.restore();
  }
});

	fabric.InsetShadowRect.fromObject = function(object, callback, forceAsync) {
		return fabric.Object._fromObject('InsetShadowRect', object, callback,...