javascript - Using multiple canvas with pdf.js -
i display in html page 4 canvas , each of them correspond page of pdf file. succeed display 1 page in 1 canvas, when want display 4 doesn't work : none of pages displayed.
what i'm doing wrong ?
edit : tried solve problem of promise (i edited code) got error : error: invalid page request pdf.js:2687:31 , here corresponding code (2697 line of return) :
getpage: function workertransport_getpage(pagenumber, capability) { if (pagenumber <= 0 || pagenumber > this.numpages || (pagenumber|0) !== pagenumber) { return promise.reject(new error('invalid page request')); } here code :
html file :
<html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta name="description" content="pdf viewer"/> <title>my page</title> </head> <body> <body> <canvas id="canvas1" width="300" height="300"></canvas> <canvas id="canvas2" width="300" height="300"></canvas> <canvas id="canvas3" width="300" height="300"></canvas> <canvas id="canvas4" width="300" height="300"></canvas> <script src="/assets/js/pdf.js"></script> <script src="/assets/js/pdf.worker.js"></script> <script src="/assets/js/pdf.latex.main.js"></script> </body> </html> javascript file (pdf.latex.main.js) :
pdfjs.disablestream = true; var pdffile; pdfjs.getdocument('/assets/pdf/temppdf.pdf').then(function (pdf) { pdffile = pdf; for(var = 1; < 4; i++) { var canvas = document.getelementbyid('canvas'+i); var context = canvas.getcontext('2d'); pdfjs.disablestream = true; openpage(pdf, i, context); } }); function openpage(pdffile, pagenumber, context) { var scale = 5; pdffile.getpage(pagenumber).then(function (page) { viewport = page.getviewport(scale); // reference canvas via context var canvas = context.canvas; canvas.width = viewport.width; canvas.height = viewport.height; canvas.style.width = "100%"; canvas.style.height = "100%"; wrapper.style.width = math.floor(viewport.width / scale) + 'pt'; wrapper.style.height = math.floor(viewport.height / scale) + 'pt'; var rendercontext = { canvascontext: context , viewport: viewport }; page.render(rendercontext); }); }
you using promises, calls function in .then branch done after for loop finished, i.e. i equal 3 (last iteration value). result, you're filling same canvas 3 times. way, take @ for loop. loops 3 times. may want change loop condition i<=4.
you should call pdfjs.getdocument before loop, , call loop within promise.
Comments
Post a Comment