¿Recrea el canvas Fabric.js y lo exportas como una imagen?

Tengo un canvas donde el usuario puede crear un diseño usando imágenes en otro div que hagan clic, enviándolo al canvas de Fabric.js donde se mueve y así sucesivamente. Como el tamaño del canvas es width="270" y height="519" , más pequeño que el producto terminado, necesito recrearlo con un canvas que tenga el width="1001" y height="1920" y luego captura de pantalla para que lo obtenga todo en 1 sola imagen. ¿Cómo hago esto?

Así es como se ve mi código hasta ahora:

HTML

 

CSS

 #CanvasContainer { width: 270px; height: 519px; margin-left: 15px; } #Canvas { overflow: hidden; } 

JAVASCRIPT

 //Defining Canvas and object array var canvas = new fabric.Canvas('Canvas'); //When clicked $(document).ready(function () { $("#Backgrounds img").click(function () { var getId = $(this).attr("id"); //adding all clicked images var imgElement = document.getElementById(getId); var imgInstance = new fabric.Image(imgElement, { left: 135, top: 259, width: 270, height: 519 }); //Corner color for clicked images imgInstance.set({ borderColor: 'white', cornerColor: 'black', transparentCorners: false, cornerSize: 12 }); canvas.add(imgInstance); }); }); 

Fabric tiene una función incorporada para convertir a urls de datos. Puede usar la propiedad de descarga de un enlace para hacer que el enlace sea un enlace de descarga. Finalmente puede usar la función DOM click() para emular haciendo clic en el enlace de descarga. El resultado final es:

 function download(url,name){ // make the link. set the href and download. emulate dom click $('').attr({href:url,download:name})[0].click(); } function downloadFabric(canvas,name){ // convert the canvas to a data url and download it. download(canvas.toDataURL(),name+'.png'); } 

ahora cuando quieras descargar la llamada de canvas

 downloadFabric(canvas,'');