Canvas to PDF, HTML, Konva.js

Question

I am working about draggable objects on Konva stage. I want to the canvas object layer turn to PDF. I use toDataURL. Like this;

    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
);

Save button work without objects and save canvas image. But when i run the code with objects on stage, the page reloads and the button doesn't work. doesn't save canvas image

score 0 · Accepted Answer · answered Jan 21 '21 at 09:34

0

I would strongly recommend to doing it like shown in the 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');

This should add all text and other objects to a pdf.

answered Jan 21 '21 at 09:34

Ondolin

324
2
13

i checkhed this. But it dosent work. The error written on the console is 'Konva error: Unable to get data URL. Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. For more info read https://konvajs.org/docs/posts/Tainted_Canvas.html.' and Access to XMLHttpRequest at 'file:///C:/Users/konva%20-%20Kopya/index.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.' – sssss_sssss Jan 21 '21 at 10:36
Do you use pictures which are stored local or are they on a server? – Ondolin Jan 21 '21 at 10:39
I saved the pictures locally – sssss_sssss Jan 21 '21 at 10:42
Have you tried adding the "img.crossOrigin = 'Anonymous'" attribute when adding the images? – Ondolin Jan 21 '21 at 10:49
Yes, i tried adding this, the result is negative – sssss_sssss Jan 21 '21 at 11:27

score 0 · Answer 2 · answered Jan 21 '21 at 12:18

From the comments, I can conclude that you don't host the images using the server you use for the konva stuff. You can't access the images from your website as they are not from the same origin. This helps secure the files on your computer from the access of websites like yours. So you would have to move the images to the server and access them from there.

Canvas to PDF, HTML, Konva.js

2 Answers2