Question

我正在使用pdf.js绘制pdf画布，然后通过以下方式将该pdf转换为图像：

var canvas = document.getElementsByTagName("canvas")[0];
image = new Image();
image.src = canvas.toDataURL("image/png");
document.body.appendChild(image);

但是问题是在画布绘制完成之前，画布已转换为图像，因此生成的图像缺少部分。在将其转换为图像之前，如何等待它完成加载？画布不支持onload，并且我不想使用静态计时器等待它们完成（因为计算机的速度有所不同）。谁能帮我这个？谢谢。

完整代码

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

在使用pdf.js将画布转换为图像之前，如何等待画布完全加载？

0 个答案: