Как экспортировать холст KonvaJS в файл 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)

Есть идеи, в чем может быть проблема? Если я использую только формы KonvaJS, такие как Rect и Circle, это работает.

Answer 1

Я добавил imageObj.crossOrigin = "Anonymous"; до imageObj.src = 'absolute-path-to-image.png';, и это исправило это. Это была проблема перекрестного происхождения, не связанная с KonvaJS.

Answer 2

По умолчанию node.toDataURL() генерирует base64 для png изображения. Как я вижу из вашего сообщения, вам нужно предоставить изображение в формате jpg. Вы можете использовать это:

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