“=12=”和PDF，“=11=”，“=10=”

Question

我正在研究 Konva 舞台上的可拖动对象。我想将 canvas 对象层转为 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
);

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

Answer 1

我强烈建议按照 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 中。

Answer 2

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

“=12=”和PDF，“=11=”，“=10=”

Canvas to PDF, HTML, Konva.js

javascript

html

konva