重新创建Fabric.js画布并导出为图像？ [英] Recreate Fabric.js canvas and export as an image?

问题描述

我有一个画布，用户可以使用另一个 div 中的图像创建设计，并将其发送到Fabric.js画布，等等。由于画布的大小为 width =270和 height =519，小于成品，我需要用大小 width =1001和 height =1920的画布重新创建然后截图它，所以我得到它所有在1单个图像。

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

em> HTML

 < div id =CanvasContainer> 
< canvas id =Canvaswidth =270height =519>< / canvas> 
< / div> 
   
 
 
 
    
 $ b 
  #CanvasContainer {
 width：270px; 
 height：519px; 
 margin-left：15px; 
} 
 #Canvas {
 overflow：hidden; 
} 
  
   JAVASCRIPT   / p> 
 
 
  //定义画布和对象数组
 var canvas = new fabric.Canvas（'Canvas'）; 
 
 //单击
 $（document）.ready（function（）{
 $（＃Backgrounds img）。 var getId = $（this）.attr（id）; 
 
 //添加所有点击的图片
 var imgElement = document.getElementById（getId）; 
 var imgInstance = new fabric.Image（imgElement，{
 left：135，
 top：259，
 width：270，
 height：519 
}）; 
 //单击图像的角色
 imgInstance.set（{
 borderColor：'white'，
 cornerColor：'black'，
 transparentCorners：false，
 cornerSize： 12 
}）; 
 canvas.add（imgInstance）; 
}）; 
}）; 
  
 
 
解决方案
 Fabric具有转换为数据网址的内置函数。您可以使用链接的下载属性来使链接成为下载链接。最后，您可以使用DOM  click（）函数来模拟点击下载链接。最终结果是：
 函数下载（url，name）{
 //建立链接。设置href和下载。 emulate dom click 
 $（'< a>'）。attr（{href：url，download：name}）[0] .click 
} 
 function downloadFabric（canvas，name）{
 //将画布转换为数据网址并下载。 
下载（canvas.toDataURL（），name +'。png'）; 
} 
  
现在当您想要下载画布调用
  downloadFabric（canvas，'< file name>'）; 
  
 
I have a canvas where the user can create a design using images in another div that they click, sending it to the Fabric.js canvas where it gets moved around and so on. Since the canvas's size is width="270"and height="519", smaller than what the finished product is, I need to recreate it with a canvas that has the size width="1001"and height="1920" and then screenshot it so that I get it all in 1 single image. How do I do this?


This is what my code looks like so far:

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 has a built in function to convert to data urls. You can use the download property of a link to make the link a download link. Finally you can use the DOM click() function to emulate clicking the download link. The end result is:
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');
}
now when you want to download the canvas call
downloadFabric(canvas,'<file name>');


                        
这篇关于重新创建Fabric.js画布并导出为图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！