Question

我有一个画布，用户可以使用他们点击的另一个div中的图像创建设计，将其发送到Fabric.js画布，然后移动它，依此类推。由于画布的大小为width="270"和height="519"，小于成品，我需要使用尺寸为width="1001"且{{1}的画布重新创建它然后将其截屏，以便我在1张单张图片中获取所有内容。我该怎么做？

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

HTML

height="1920"

CSS

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

JAVASCRIPT

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

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

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

1 个答案: