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

时间:2018-04-03 14:21:54

标签: fabricjs

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

enter image description here

我尝试将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>

1 个答案:

答案 0 :(得分: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");
}

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