Convert PDF to image in JavaScript

Convert PDF to PNG, JPG, BMP, TIFF using WebViewer SDK in the browser without server-side dependencies. (You can also check out our online PDF to Image demo now.)

Using WebViewer

You can rasterize PDF pages to an image and then save the resulting buffer to your database, file storage, or simply download it. The sample below demonstrates how to generate images with FullAPI enabled, you can also generate images using a lean build of WebViewer which should result in better performance.

JavaScript

Webviewer({
    fullAPI: true,
}, viewerRef).then((instance) => {
    const { Core } = instance;
    const { documentViewer, PDFNet } = Core;
    
    await PDFNet.initialize();

    documentViewer.addEventListener('documentLoaded', async () => {
        const doc = await documentViewer.getDocument().getPDFDoc();
        const pdfdraw = await PDFNet.PDFDraw.create(92);
        const itr = await doc.getPageIterator(1);
        const currPage = await itr.current();

        const pngBuffer = await pdfdraw.exportBuffer(currPage, 'PNG');
        const tifBuffer = await pdfdraw.exportBuffer(currPage, 'TIFF');
    });
});

Without WebViewer UI

This code sample demonstrates how to convert PDF to image without initializing WebViewer UI. The sample below demonstrates how to generate images with FullAPI enabled, you can also generate images using a lean build of WebViewer which should result in better performance.

<html>
  <body>
    <script src="../lib/core/webviewer-core.min.js"></script>
    <script>
    (async function() {
      Core.setWorkerPath('../lib/core');
      Core.enableFullPDF();
      const licenseKey = 'YOUR_LICENSE_KEY';
      await PDFNet.initialize();

      const doc = await PDFNet.PDFDoc.createFromURL('url_to_pdf');
      const pdfdraw = await PDFNet.PDFDraw.create(92);
      const itr = await doc.getPageIterator(1);
      const currPage = await itr.current();  
      const pngBuffer = await pdfdraw.exportBuffer(currPage, 'PNG');
      const tifBuffer = await pdfdraw.exportBuffer(currPage, 'TIFF');
    })()
    </script>
  </body>
</html>