El objetivo es representar páginas de un pdf en un lienzo externo en el que pueda copiar partes de la página en un lienzo visible. Como primer paso, el siguiente código está destinado a representar la primera página completa de un pdf. Se representa en un lienzo fuera de la pantalla y luego se copia desde fuera de la pantalla al lienzo visible. O esa era mi intención. No aparece nada.
<!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>El siguiente código hace lo que se pretendía. Todavía no estoy seguro de por qué el código original no funciona. Mi mejor conjetura es que se debe a que algo se hizo de forma asincrónica. Aparte de eso, hay muy pocas diferencias entre las dos implementaciones.
<!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>