I am using PDF.JS to render pdf pages into different canvas elements. my requirement is to capture the output of the canvas and to display it as an image. Is there some event to know if the rendering of the pdf page in canvas has been finished or not. because when I try to capture the output of canvas it is blank. but the pdf page is rendered properly. it looks like my capture event is being called before the pdf.js finishes the rendering process.
here is my code:
page.render(renderContext); var myImage = new Image(); myImage.src = document.getElementById('my-canvas-id').toDataURL(); $('body').append(myImage);
If I execute the same code in my FireFox's console this works fine. so nothing is wrong with this code.
Just to let you people know that I already have tried document.ready and window.load events.
What Browsers does PDF. js Support. PDF. js is used within Mozilla Firefox today as the built-in PDF viewer, and it works well within a website when viewed using the latest versions of Chrome and Firefox, whether through the pre-built PDF.
PDF. js leverages Asynchronous JavaScript and XML (AJAX) to download the PDF file from a web server and parse its contents. Once prepared, content is then rendered onto an HTML5 <canvas> element using canvas drawing commands.
PDF. js is a good free option if you're willing to invest time into implementing a UI for it. The project comes with some examples and API docs.
js is a JavaScript library that renders Portable Document Format (PDF) files using the web standards-compliant HTML5 Canvas. The project is led by the Mozilla Corporation after Andreas Gal launched it (initially as an experiment) in 2011.
I was also struggling with this problem.. the solution that i used is:
//Step 1: store a refer to the renderer var pageRendering = page.render(renderContext); //Step : hook into the pdf render complete event var completeCallback = pageRendering.internalRenderTask.callback; pageRendering.internalRenderTask.callback = function (error) { //Step 2: what you want to do before calling the complete method completeCallback.call(this, error); //Step 3: do some more stuff };
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With