如何将KonvaJS canvas导出为包含图像的PDF文件？

Question

我正在使用jsPDF将KonvaJS平台导出为PDF文件。在我尝试添加图像之前，它工作正常。

这里是我在做什么的一个例子：

var pdfGenerator = new jsPDF();
var imageObj = new Image();
imageObj.onload = function() {
    var konvaImage = new Konva.Image({
        x: 0,
        y: 0,
        image: imageObj
    });

    layer.add(konvaImage);
    stage.add(layerPDF);
    layer.draw();

    var dataURL = stagePDF.toDataURL({pixelRatio: 2});
    pdfGenerator.addImage(dataURL, 'JPEG', 10, 10, 189, 267);

    pdfGenerator.save('stage.pdf');
};
imageObj.src = 'absolute-path-to-image.png';

当我尝试它时，出现此错误：

jspdf.min.js:50 Uncaught Error: Supplied data is not a JPEG
    at jspdf.min.js:50
    at Object.x.processJPEG (jspdf.min.js:50)
    at Object.x.addImage (jspdf.min.js:50)
    at Image.imageObj.onload (a9ad15f30fefd32778:468)

有什么问题的想法吗？如果仅使用Rect和Circle这样的KonvaJS形状，则可以使用。

Answer 1

默认情况下node.toDataURL()为png图像生成base64。从您的邮件中可以看到，您需要提供jpg图片。您可以使用此：

var dataURL = stagePDF.toDataURL({
  pixelRatio: 2,
  mimeType: 'image/jpeg'
});
pdfGenerator.addImage(dataURL, 'JPEG', 10, 10, 189, 267);

Answer 2

我在imageObj.crossOrigin = "Anonymous";之前添加了imageObj.src = 'absolute-path-to-image.png';，并对其进行了修复。这是一个跨域问题，与KonvaJS无关。