I've figured out the top section (and sorry for not being specific). But now I am using pdf.js to draw a canvas of a pdf and then convert that pdf to an image via:
var canvas = document.getElementsByTagName("canvas")[0];
image = new Image();
image.src = canvas.toDataURL("image/png");
document.body.appendChild(image);
But the problem is that the canvas is converted to an image before the canvas is done drawing, so the resulting image is missing parts. Canvases do not support onload and I don't want to use a static timer to wait for them to finish. Can anyone help me with this? Thanks.
Full Code
<html>
<head>
</head>
<body>
</body>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js"></script>
<script type="text/javascript">
var currPage = 1;
var numPages = 0;
var thePDF = null;
pdfjsLib.getDocument(<?php echo "'/bw_site/documents/newslettermailtemp/".$filename."'"; ?>).then(function(pdf) {
thePDF = pdf;
numPages = pdf.numPages;
pdf.getPage( 1 ).then( handlePages );
});
function handlePages(page)
{
var viewport = page.getViewport( 2 );
var canvas = document.createElement( "canvas" );
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({canvasContext: context, viewport: viewport});
document.body.appendChild( canvas );
currPage++;
if ( thePDF !== null && currPage <= numPages )
{
thePDF.getPage( currPage ).then( handlePages );
}else{canvasfunc();}
}
var image = [];
function canvasfunc(){
for(var i = 0; i < document.getElementsByTagName("canvas").length; i++){
var canvases = document.getElementsByTagName("canvas")[i];
image[i] = new Image();
image[i].src = canvases.toDataURL("image/png");
document.body.appendChild(image[i]);
}
}
</script>
</html>