fabric 2.4 toDataURL test

by uemon

HTML

<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.min.js"></script>
<canvas id="c1"></canvas>
<button id="toDataURL">toDataURL</button>
<div id="result"></div>

CSS

canvas {
  border: 1px solid #999;
}

JavaScript

(function() {
 
 var canvas = new fabric.Canvas('c1',{
  	width:500,
    height:300, 
    backgroundColor: "#ffffff",
  });

// ADD YOUR CODE HERE
	var savedata;
	var clipPath = new fabric.Rect({ 
  		width: 100, height:100, top: 100, left: 150, fill: '#aaaaaa', 
      absolutePositioned: true });
  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,
      crossOrigin :'anonymous',
    })
    canvas.add(imgInstance);
  });
  
  $("#toDataURL").on('click', function(){
    var base64 = canvas.toDataURL({format: 'jpg',
                                  });
    console.log(base64);
  });
  
  
  
  

})()