重新创建 Fabric.js 画布并导出为图像？

Question

我有一个画布，用户可以在其中使用他们单击的另一个 div 中的图像创建设计，将其发送到 Fabric.js 画布并在其中移动等等。由于画布的尺寸为width="270"和height="519"，小于成品的尺寸，我需要使用尺寸为width="1001"和height="1920"的画布重新创建它，然后对其进行截图以便我得到它在 1 张单张图片中。我该怎么做？

这是我的代码到目前为止的样子：

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

Fabric 有一个内置函数可以转换为数据 url。您可以使用链接的下载属性使链接成为下载链接。最后，您可以使用 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>');