[英]Recreate Fabric.js canvas and export as an image?
我有一个画布,用户可以使用他们点击的另一个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);
});
});
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>');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.