画布转 PDF、HTML、Konva.js答案

【问题标题】：Canvas to PDF, HTML, Konva.js画布转 PDF、HTML、Konva.js
【发布时间】：2021-01-21 07:17:20
【问题描述】：

我正在研究 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
);

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

【问题讨论】：

标签： javascript html konva

【解决方案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 中。

【讨论】：

我检查了这个。但它不起作用。控制台上写的错误是'Konva error: Unable to get data URL。无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。欲了解更多信息，请阅读konvajs.org/docs/posts/Tainted_Canvas.html。和从源“null”访问“file:///C:/Users/konva%20-%20Kopya/index.html”的 XMLHttpRequest 已被 CORS 策略阻止：跨源请求仅支持协议方案：http , 数据, chrome, chrome-extension, chrome-untrusted, https.'
您使用的图片是存储在本地还是在服务器上？
我把图片保存在本地
添加图片时是否尝试过添加“img.crossOrigin = 'Anonymous'”属性？
是的，我尝试添加这个，结果是否定的

【解决方案2】：

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

【讨论】：