Jquery - Get all canvases ready state

StackOverflow https://stackoverflow.com/questions/23338567

  •  10-07-2023
  •  | 
  •  

Frage

I am writing pdf document pages to canvases with the code below. I am getting number of pages '$np' with pdfinfo tool of xpdf. In the end, I need to bind all pages to turn.js. But it never renders canvases after if they are bind to turn.js with turn function already. I have to do this after all canvases are rendered completely. div ready, canvas ready nor document ready functions don't work. I don't want to do this with setTimeout because render times may depend on server speed. What other workarounds can be?

<!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>';
?>
War es hilfreich?

Lösung

See https://github.com/mozilla/pdf.js/blob/master/src/display/api.js#L468 : page.render(renderContext) will return you a RenderTask which contains the promise property (a Promise). You can call its then function and provide a callback to track rendering completion.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top