我們的目標是使一個PDF頁面到offsrceen畫布上，我可以在頁面的部分復制到一個可見的畫布。作為第一步驟，下面的代碼是為了使一個pdf的整個第一頁。它呈現到螢屏外的畫布，然后從螢屏外到可見帆布副本。或者說，是我的本意。什么都沒有出現。
<!doctype html>
<html lang="en">
<head>
<!--The pdf.js stuff, from Mozilla.-->
<script src="pdf.js"></script>
<script src="pdf.worker.min.js"></script>
<style>
canvas { border: 1px solid black; }
</style>
</head>
<body onload="main()">
<canvas id="pdf_renderer"></canvas>
<script>
var myState = {
pdf: null,
zoom: 1,
testcvs: null
}
async function main() {
await openDocument();
await getpage(1);
var canvas = document.getElementById("pdf_renderer");
var ctx = canvas.getContext('2d');
canvas.width = myState.testcvs.width;
canvas.height = myState.testcvs.height;
ctx.drawImage(myState.testcvs,0,0);
}
async function openDocument() {
await pdfjsLib.getDocument('ex01gear.pdf').then((pdf) => {
myState.pdf = pdf;
});
}
async function getpage(pagenum) {
await myState.pdf.getPage(pagenum).then((page) => {
var offcanvas = document.createElement('canvas');
var offctx = offcanvas.getContext('2d');
var viewport = page.getViewport(myState.zoom);
offcanvas.width = viewport.width;
offcanvas.height = viewport.height;
page.render({
canvasContext: offctx,
viewport: viewport
});
myState.testcvs = offcanvas;
});
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
下面的代碼是預期的。我仍然不確定原始代碼無法作業的原因。我最好的猜測是，它是由于異步完成的事情。除了這兩個懇求的情況下很少。
<!doctype html>
<html lang="en">
<head>
<!--The pdf.js stuff, from Mozilla.-->
<script src="pdf.js"></script>
<script src="pdf.worker.min.js"></script>
<style>
canvas { border: 1px solid black; }
</style>
</head>
<body onload="main()">
<canvas id="pdf_renderer"></canvas>
<script>
var myState = {
pdf: null,
zoom: 1,
testcvs: null,
curpage: null
}
async function main() {
await openDocument();
await getpage(1);
await renderOff();
var canvas = document.getElementById("pdf_renderer");
var ctx = canvas.getContext('2d');
var viewport = myState.curpage.getViewport(myState.zoom);
canvas.width = viewport.width;
canvas.height = viewport.height;
ctx.drawImage(myState.testcvs, 0, 0);
}
async function openDocument() {
await pdfjsLib.getDocument('ex01gear.pdf').then((pdf) => {
myState.pdf = pdf;
});
}
async function getpage(pagenum) {
await myState.pdf.getPage(pagenum).then((page) => {
myState.curpage = page;
});
}
async function renderOff() {
myState.testcvs = document.createElement('canvas');
var offctx = myState.testcvs.getContext('2d');
var viewport = myState.curpage.getViewport(myState.zoom);
myState.testcvs.width = viewport.width;
myState.testcvs.height = viewport.height;
await myState.curpage.render({
canvasContext: offctx,
viewport: viewport
});
}
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/452242.html
標籤：javascript pdf html5-画布 pdf.js 离屏