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

Question

我有一个画布，用户可以在其中使用另一个

中的图像创建设计，他们点击该图像，将其发送到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);
    });
});

- Arco_Pelago

Answer 1

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

- kyledavide

---

谢谢。我在Firefox和Safari中遇到了一些问题，无法使其正常工作。它在Chrome中运行良好。在Safari中，此代码会打开一个新标签页。在Firefox中则没有任何反应。 - Kirby

@kyledavide 我知道已经有一段时间了，但你知道是否存在类似于这样的东西，但是针对SVG而不是PNG吗？ - anonymoose

@code4ever有一个toSvg()方法可以获取画布的SVG字符串，但是从那里开始，您需要手动构建数据URL。我现在离开我的电脑，但是等我回来后，我会制作一个代码片段。 - kyledavide

@kyledavide 我期待着看到那个！ - anonymoose

如果您愿意，我也可以创建一个新问题。 - anonymoose

@code4ever 这大概是这样的：https://gist.github.com/KyleDavidE/a1980e82d149e899728250557234ebd9 - kyledavide