如何在将画布保存为图像时停用所有内容？

Question

我有一个fabricjs画布，带有一个按钮，用于向所述画布添加文本，另一个用于将画布保存为计算机上的图像。当我保存时选择了一个对象时，控件是可见的。当我选择将画布保存为图像并选择了一个对象时，如何停用控件，以便控件不会持久保存到生成的PNG like this？

我尝试将canvas.deactivateAll();添加到保存功能的不同部分，但它没有用。

var canvas = new fabric.Canvas('c', {
  preserveObjectStacking: true,
  lockUniScaling: true,
  centeredScaling: true
});
canvas.setHeight(412);
canvas.setWidth(637);

// Add Text, Enter Editing Mode and Select All
$('#text').on('click', addtext);

function addtext() {
  var text = new fabric.IText('New text');
  canvas.add(text);
  canvas.setActiveObject(text);
  text.enterEditing();
  text.selectAll();
  canvas.renderAll();
}

// Save as image
function download(url, name) {
  $("<a>")
    .attr({
      href: url,
      download: name
    })[0]
    .click();
}

function save() {
  canvas.deactivateAll().renderAll();
  var canvas = document.getElementById('c');
  var dataURL = canvas.toDataURL();
  var name = 'image';
  download(dataURL, name + ".png");
}
$("#save").click(save);

body {
  padding: 10px;
}

canvas {
  border: 1px solid #dddd;
  margin-top: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<button id="text">
Text
</button>

<button id="save">
Save
</button>

<canvas id='c'></canvas>

Answer 1

你非常接近。只要您使用canvas for fabricjs canvas（它只是为了避免混淆），请将保存函数中的画布变量名称更改为某个不同的名称。 更新你保存（）功能：

function save() {
  canvas.deactivateAll().renderAll();
  var c = document.getElementById('c');
  var dataURL = c.toDataURL();
  var name = 'image';
  download(dataURL, name + ".png");
}

您忘记在停用对象后渲染画布。