Section:

Generate PDF page thumbnails using Apryse's Web SDK

Page thumbnails are rendered image representations of the page they are generated from.

The SDK API has the flexibility to alter the resolution or size of the thumbnail output and whether to include annotations or not.

Create a basic page thumbnail

To create a basic PDF page thumbnail where the result is a HTMLCanvasElement or HTMLImageElement.

loadThumbnailAsync is deprecated since version 8.3 and removed since version 10.0. Please use loadThumbnail instead.

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer } = instance.Core;
4    documentViewer.addEventListener('documentLoaded', () => {
5      const doc = documentViewer.getDocument();
6      const pageNum = 1;
7      doc.loadThumbnail(pageNum, (thumbnail) => {
8        // thumbnail is a HTMLCanvasElement or HTMLImageElement
9        console.log(thumbnail);
10      });
11    });
12  });

Related Links

Create a High resolution page image (png or jpg) with annotations

To create a high resolution page thumnbails and optionally with annotations where the result is a HTMLCanvasElement or HTMLImageElement.

loadCanvasAsync is deprecated since version 8.3 and removed since version 10.0. Please use loadCanvas instead.

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer } = instance.Core;
4    documentViewer.addEventListener('annotationsLoaded', () => {
5      const doc = documentViewer.getDocument();
6      const pageNumber = 1;
7      const zoom = 2; // render at twice the resolution
8      
9      doc.loadCanvas({
10        pageNumber,
11        zoom,
12        drawComplete: async (thumbnail) => {
13          const corePageRotation = (doc.getPageRotation(pageNumber) / 90) % 4;
14          annotationManager.setAnnotationCanvasTransform(thumbnail.getContext('2d'), zoom, corePageRotation);
15
16          // optionally comment out "drawAnnotations" below to exclude annotations
17          await instance.Core.documentViewer.getAnnotationManager().drawAnnotations(pageNumber, thumbnail);
18          // thumbnail is a HTMLCanvasElement or HTMLImageElement
19          console.log(thumbnail);
20        }
21      });
22    });
23  });

Related Links

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales