0

我正在研究 Konva 舞台上的可拖动对象。我想将画布对象层转为 PDF。我使用 toDataURL。像这样;

    var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height,
    id: 'stage',
});


var grid_layer = new Konva.Layer();
var object_layer = new Konva.Layer();
stage.add(grid_layer);
stage.add(object_layer);

function updateScreen() {
    object_layer.batchDraw()
}
function downloadURI(uri, name) {
  var link = document.createElement('a');
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

document.getElementById('save').addEventListener(
  'click',
  function() {
    var dataURL = stage.toDataURL({ pixelRatio: 3 });
    downloadURI(dataURL, 'stage.png');
  },
  false
);

保存没有对象的按钮工作并保存画布图像。但是当我在舞台上运行带有对象的代码时，页面重新加载并且按钮不起作用。不保存画布图像

4

2 回答 2

0

从评论中，我可以得出结论，您没有使用您用于 konva 东西的服务器来托管图像。您无法从您的网站访问图像，因为它们不是来自同一来源。这有助于保护您计算机上的文件免受您网站等网站的访问。因此，您必须将图像移动到服务器并从那里访问它们。

于 2021-01-21T12:18:59.033 回答
0

我强烈建议您按照Konva Wiki中的说明进行操作。

// Code form KonvaJS wiki
var pdf = new jsPDF('l', 'px', [stage.width(), stage.height()]);
pdf.setTextColor('#000000');
// first add texts
stage.find('Text').forEach((text) => {
    const size = text.fontSize() / 0.75; // convert pixels to points
    pdf.setFontSize(size);
    pdf.text(text.text(), text.x(), text.y(), {
        baseline: 'top',
        angle: -text.getAbsoluteRotation(),
    });
});

// then put image on top of texts (so texts are not visible)
pdf.addImage(
    stage.toDataURL({ pixelRatio: 2 }),
    0,
    0,
    stage.width(),
    stage.height()
);

pdf.save('canvas.pdf');

这应该将所有文本和其他对象添加到 pdf。

于 2021-01-21T09:34:20.680 回答