rendering first page as thumbnail

[Priyanka M]

Hi,

I am using pdf.js for my eBook reader app. I want to be able to show the first page of each pdf as thumbnail. Is it possible with the current implementation. if yes then how to go about it?

Thanks in advance.

[Julian Viereck]

You can render separate pages to a canvas element. Take a look at the API.js file and the example. From there, you create small html-canvas elements. For these, you call the rendering.

The example to look at is located under: examples/helloworld/hello.js in the repo. The call to `page.render(renderContext);` triggers the actual rendering.

Let me know if you need more help with this!

Best,

Julian

> _______________________________________________
> dev-pdf-js mailing list
> dev-p...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-pdf-js

[Priyanka M]

Hi Julian,

I wanted something like this..

thumbnail1 document1 name
thumbnail2 document2 name

like a pdf gallery.
But with the hello world example it just renders a single pdf file in a canvas element. I couldn't do this with multiple pdfs.

for eg. this is the architecture of the document,
<div id = "div1">
foreach (urls as url) {
<a id = "a1" href = "url"/>
}
</div>
now how to generate a canvas for each pdf url on the same page?

I thought I could include a canvas tag(with id = "url") within each anchor tag, and then in the js file do something like this

$('#div1 a').each(function() {
var url = $('#a1').attr('href');
PDFJS.getDocument(url).then(function(pdf) {
//rest of the code
var canvas = document.getElementById(url);
//remaining code
});
});

but it didn't work. it rendered only the first pdf under a canvas. then the rest were blank canvases.

do you have a solution?

thanks
priyanka

[Julian Viereck]

Hi priyanka,

> but it didn't work. it rendered only the first pdf under a canvas. then the rest were blank canvases.
>
> do you have a solution?

could you make your current code available somewhere? That would be easier for me to spot what's going wrong. Easiest might be to just put the code you have into a gist:

https://gist.github.com/

and then send the link here again.

Best,

Julian

[Julian Viereck]