【发布时间】：2014-04-28 10:24:22
【问题描述】：
我正在使用下面的代码将 pdf 文档页面写入画布。我正在使用 xpdf 的 pdfinfo 工具获取页数“$np”。最后，我需要将所有页面绑定到turn.js。但是，如果画布已经绑定到带有 turn 功能的 turn.js，则它永远不会渲染画布。在所有画布完全渲染后，我必须这样做。 div 就绪、画布就绪或文档就绪功能不起作用。我不想使用 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>';
?>
【问题讨论】：