Question

我正在使用下面的代码将pdf文档页面写入画布。我使用xpdf的pdfinfo工具获得页数'$ np'。最后，我需要将所有页面绑定到turn.js.但是如果它们已经与turn函数绑定到turn.js，那么它永远不会渲染画布。所有画布完全渲染后我必须这样做。 div ready，canvas ready和文档就绪函数不起作用。我不想使用setTimeout执行此操作，因为渲染时间可能取决于服务器速度。还有什么其他的解决方法？

<!DOCTYPE html>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="turn.min.js"></script>
<script type="text/javascript" src="compatibility.js"></script>
<script type="text/javascript" src="pdf.js"></script>
<?php 
function getPDFPages($document)
{
    $cmd = "pdfinfo"; 
    exec("$cmd $document", $output);
    $pagecount = 0;
    foreach($output as $op)
    {
        if(preg_match("/Pages:\s*(\d+)/i", $op, $matches) === 1)
        {
            $pagecount = intval($matches[1]);
            break;
        }
    }
    return $pagecount;
}
$document = 'pegasus.pdf';
$np=getPDFPages($document);
 $js='';
echo '<div id="flipbook" style="display:none;">';
for ($ii = 1; $ii <=$np; $ii++) {
echo'<div><canvas id="page'.$ii.'" style="border:1px solid black;"/></div>';}
echo '</div><script>PDFJS.workerSrc = "pdf.worker.js";"use strict";PDFJS.getDocument("'.$document.'").then( function (pdf) {
for(z=1;z<='.$np.';z++)
 wrPDF(pdf, z)

});
function wrPDF(pdf, pn) {
    pdf.getPage(pn).then(
function(page) {var scale = 1;var viewport = page.getViewport(scale);var canvas = document.getElementById("page"+pn);var context = canvas.getContext("2d");canvas.height = viewport.height;canvas.width = viewport.width;var renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext)})
    }
$(document).ready(function(){
    $("#flipbook").turn({width: 1228,height: 840,autoCenter: true}).show("slow");
    $(window).bind("keydown", function(e){
        switch (e.keyCode) {
            case 37:$("#flipbook").turn("previous");break;
            case 39:$("#flipbook").turn("next");break;}
            })
    });
</script>';
?>

Answer 1

请参阅https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L468：page.render（renderContext）将返回一个RenderTask，其中包含promise属性（Promise）。您可以调用其then函数并提供回调以跟踪渲染完成情况。

Jquery - 获取所有画布准备状态

1 个答案: