Converting canvas to img object is an empty picture, why?

Question

Canvas

Hi all.

Doing a PDF download and a preview of the file. Next, you need to save the review as a picture on the server, and before sending it to the server, I decided to see if everything is ok ...

I read PDF, I make canvas - super.

var img = new Image();
img.src = canvas.toDataURL();
document.body.appendChild(img);

It produces an image of similar size, but empty and transparent.

Here is jsfiddle .

thanks for the help

Answer 1

Wait for page.render to render the pdf on the canvas, after that you can use canvas.toDataURL.

const renderTask = page.render(renderContext).promise;

renderTask.then(() => {
  var img = new Image();
  img.src = canvas.toDataURL();
  img.onload = () => document.body.appendChild(img);
});