将整个画布捕获为图像 - Fabric JS答案

【问题标题】：Capturing entire canvas as an image - Fabric JS将整个画布捕获为图像 - Fabric JS
【发布时间】：2019-10-16 20:28:28
【问题描述】：

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

【问题讨论】：

标签： canvas fabricjs

【解决方案1】：

这是你需要的

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<canvas  width="400" height="400" id="canvasContainer"></canvas>
<img id="ten" style="border:2px solid;"/>

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

更新：

上述解决方案仅适用于从v2.x 开始的v1.x 函数deactivateAll 不再可用，而是使用discardActiveObject 查看此问题以获取更多详细信息Github Issue

【讨论】：

这行不通了，你能不能用工作脚本更新答案。
@SundeepPidugu 请检查是否更新了演示以及导致它失败的相关更改
我试过这样做，但当我尝试使用 toDataURL() 时，它总是显示 Cannot read property 'clearRect' of null 我该如何解决？
@SundeepPidugu 你可以创建一个小提琴.. 不知道你面临什么问题

【解决方案2】：

只需使用 HTMLCanvasElement.toDataURL() - documentation here

您可以通过以下几行获取画布的数据 URL：

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

然后使用dataURL将图片显示或保存到文件中再显示。

【讨论】：

不鼓励在 SO 上使用仅链接的答案。请将相关内容直接添加到您的答案中。