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.
Jquery - Get all canvases ready state
Вопрос
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>';
?>
Решение
Не связан с StackOverflow