canvas to png in fabricjs
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<script src="https://rawgit.com/eligrey/FileSaver.js/master/FileSaver.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
<button id="select">Selection mode</button>
<button id="draw">Drawing mode</button>
<button id="canvas2png">Canvas 2 PNG</button>
JavaScript
var canvas = new fabric.Canvas('paper', { isDrawingMode: true });
$("#select").click(function(){
canvas.isDrawingMode = false;
});
$("#draw").click(function(){
canvas.isDrawingMode = true;
});
$("#canvas2png").click(function(){
canvas.isDrawingMode = false;
if(!window.localStorage){alert("This function is not supported by your browser."); return;}
var blob = new Blob([b64toBlob(canvas.toDataURL('png').replace(/^data:image\/(png|jpg);base64,/, ""),"image/png")], {type: "image/png"});
saveAs(blob, "testfile1.png");
});
// Adding objects to the canvas...
// adding text
var text = new fabric.Text('Text inside canvas', {
left: 40,
top: 50
});
text.hasRotatingPoint = true;
canvas.add(text);
// adding circle
var circle = new fabric.Circle({
left: 200,
top: 150,
radius: 50,
fill: "#299b71"
});
circle.hasRotatingPoint = true;
canvas.add(circle);
// adding triangle
var triangle = new fabric.Triangle({
left: 130,
top: 150,
strokeWidth: 1,
width:70,height:90,
stroke: 'black',
fill:'#ff8a1b',
selectable: true,
originX: 'center'
});
triangle.hasRotatingPoint = true;
canvas.add(triangle);
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}