Question

如何在Fabric JS中将整个画布捕获为图像？

Answer 1

这是你需要的

＆＃13;

var canvas  = new fabric.Canvas('canvasContainer');
var rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill:  "#FF0000",
        stroke: "black",
        width: 100,
        height: 100,
        strokeWidth: 10, 
    });
   
   
    canvas.add(rect);
     
canvas.renderAll();
var convertToImage=function(){
  canvas.deactivateAll().renderAll();  
  document.getElementById("ten").src=canvas.toDataURL('png'); 
}
convertToImage();

＆＃13;

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas  width="400" height="400" id="canvasContainer"></canvas>
<img id="ten" style="border:2px solid;"/>

＆＃13;

在这里你可以看到我没有为图像提供任何src。相反，函数convertToImage将设置图像的来源。这是Fiddle

Answer 2

只需使用HTMLCanvasElement.toDataURL（） - documentation here

您可以使用以下行获取画布的数据网址：

var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();

然后使用dataURL将图像显示或保存到文件中，然后显示它。

捕获整个画布作为图像 - Fabric JS

2 个答案: