Generate PDF page thumbnails using Apryse's Web SDK

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Package: Page ManipulationLive demo

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._

JavaScript (SDK v8.0+)

WebViewer(...)
  .then(instance => {
    const { documentViewer } = instance.Core;
    documentViewer.addEventListener('documentLoaded', () => {
      const doc = documentViewer.getDocument();
      const pageNum = 1;
      doc.loadThumbnail(pageNum, (thumbnail) => {
        // thumbnail is a HTMLCanvasElement or HTMLImageElement
        console.log(thumbnail);
      });
    });
  });

Document.loadThumbnail

JavaScript (SDK v7.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer } = instance;
    docViewer.on('documentLoaded', () => {
      const doc = docViewer.getDocument();
      const pageNum = 1;
      doc.loadThumbnailAsync(pageNum, (thumbnail) => {
        // thumbnail is a HTMLCanvasElement or HTMLImageElement
        console.log(thumbnail);
      });
    });
  });

Document.loadThumbnailAsync

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer } = instance;
    docViewer.on('documentLoaded', () => {
      const doc = docViewer.getDocument();
      const pageIdx = 0;
      doc.loadThumbnailAsync(pageIdx, (thumbnail) => {
        // thumbnail is a HTMLCanvasElement or HTMLImageElement
        console.log(thumbnail);
      });
    });
  });

Document.loadThumbnailAsync

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._

JavaScript (SDK v8.0+)

WebViewer(...)
  .then(instance => {
    const { documentViewer } = instance.Core;
    documentViewer.addEventListener('annotationsLoaded', () => {
      const doc = documentViewer.getDocument();
      const pageNumber = 1;
      const zoom = 2; // render at twice the resolution
      
      doc.loadCanvas({
        pageNumber,
        zoom,
        drawComplete: async (thumbnail) => {
          const corePageRotation = (doc.getPageRotation(pageNumber) / 90) % 4;
          annotationManager.setAnnotationCanvasTransform(thumbnail.getContext('2d'), zoom, corePageRotation);

          // optionally comment out "drawAnnotations" below to exclude annotations
          await instance.Core.documentViewer.getAnnotationManager().drawAnnotations(pageNumber, thumbnail);
          // thumbnail is a HTMLCanvasElement or HTMLImageElement
          console.log(thumbnail);
        }
      });
    });
  });

Document.loadCanvas AnnotationManager.drawAnnotations

JavaScript (SDK v7.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer } = instance;
    docViewer.on('annotationsLoaded', () => {
      const doc = docViewer.getDocument();
      const pageNumber = 1;
      const zoom = 2; // render at twice the resolution
      
      doc.loadCanvasAsync({
        pageNumber,
        zoom,
        drawComplete: async (thumbnail) => {
          const corePageRotation = (doc.getPageRotation(pageNumber) / 90) % 4;
          annotationManager.setAnnotationCanvasTransform(thumbnail.getContext('2d'), zoom, corePageRotation);

          // optionally comment out "drawAnnotations" below to exclude annotations
          await instance.docViewer.getAnnotationManager().drawAnnotations(pageNumber, thumbnail);
          // thumbnail is a HTMLCanvasElement or HTMLImageElement
          console.log(thumbnail);
        }
      });
    });
  });

Document.loadCanvasAsync AnnotationManager.drawAnnotations

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer } = instance;
    docViewer.on('annotationsLoaded', () => {
      const doc = docViewer.getDocument();
      const pageIdx = 0;
      const zoom = 2; // render at twice the resolution
      
      doc.loadCanvasAsync({
        pageIndex: pageIdx,
        zoom,
        drawComplete: async (thumbnail) => {
          const pageNumber = 1;
          const corePageRotation = (doc.getPageRotation(pageNumber) / 90) % 4;
          annotationManager.setAnnotationCanvasTransform(thumbnail.getContext('2d'), zoom, corePageRotation);
          
          // optionally comment out "drawAnnotations" below to exclude annotations
          await instance.docViewer.getAnnotationManager().drawAnnotations(pageNumber, thumbnail);
          // thumbnail is a HTMLCanvasElement or HTMLImageElement
          console.log(thumbnail);
        }
      });
    });
  });

Document.loadCanvasAsync AnnotationManager.drawAnnotations