svg output 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="300"></canvas>  
</div>

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

<script src="http://fabricjs.com/lib/fabric.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();

  rect = new fabric.Rect({
    id : "rect",
    left : 50,
    top : 50,
    width : 400,
    height : 200,
    fill : 'transparent',
    strokeWidth: 2,
    stroke: 'red',
    selectable: false,
    svented: false
  });
  
  canvas_source.add(rect);
}

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 = rect.width / img.width;
      
      img.set({ 
        left: rect.left, 
        top: rect.top,
        scaleX: scale,
        scaleY: scale,
        selectable: false,
    		svented: false
      });
      
      canvas_source.add(img);
      
      rect.bringToFront();
      
      canvas_source.renderAll();
      
      export_svg();
    });        
  };
  readerDataUrl.readAsDataURL(file);
};

function export_svg(){
  fabric.loadSVGFromString(canvas_source.toSVG(), function(objects, options){
		var group = new fabric.Group(objects);
    group.set({
      //left: 0,
      //top: 0,
      //originX: 'left',
      //originY: 'top'
    }); 
    canvas_target.add(group);
  });
}

var canvas_source;
var canvas_target;

var rect;

$(document).ready(function(){
	var canvas_option = {
  	selection: false,
    preserveObjectStacking: true
  };
  
	canvas_source = new fabric.Canvas('html_canvas_source', canvas_option);
  canvas_target = new fabric.Canvas('html_canvas_target', canvas_option);
   
  init_canvas();
   
	$("#file").change(function(e){
  	select_image(e.target.files[0]);
	});
});