Воссоздать ткань Fabric.js и экспортировать как изображение?

Question

У меня есть холст, где пользователь может создать дизайн, используя изображения в другом div, который они нажимают, отправляя его на холст Fabric.js, где он перемещается и т. Д. Так как размер холста width="270" и height="519", меньше, чем готовый продукт, мне нужно его заново создать с помощью холста размером width="1001" и height="1920", а затем снимок экрана, чтобы получить все это в одном единственном изображении. Как мне это сделать?

Это то, что мой код выглядит так далеко:

HTML

<div id="CanvasContainer"> 
    <canvas id="Canvas" width="270" height="519"></canvas> 
</div> 

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); 
    }); 
}); 

Answer 1

Ткань имеет встроенную функцию для преобразования адресов данных. Вы можете использовать свойство загрузки ссылки, чтобы ссылка была ссылкой для загрузки. Наконец, вы можете использовать функцию DOM click() для эмуляции щелчка ссылки для загрузки. Конечный результат:

function download(url,name){ 
// make the link. set the href and download. emulate dom click 
    $('<a>').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'); 
} 

теперь, когда вы хотите скачать холст позвонить

downloadFabric(canvas,'<file name>');