Convert PDF to JPG Images in HTML5 with JavaScript

Converting PDFs to images is a common task in our daily work. We can use the images for archiving and further editing like OCR. With Dynamic Web TWAIN, a JavaScript document scanning library which has built-in support for various file formats, we can convert PDF to images in HTML5.

In this article, we are going to write a web demo to do the conversion.

Online demo

What you’ll build: A browser-based tool that loads a PDF file and converts each page to a downloadable JPG image using Dynamic Web TWAIN’s JavaScript SDK.

Key Takeaways

  • Dynamic Web TWAIN can convert PDF pages to JPG images entirely in the browser using its built-in PDF rasterizer — no server-side processing required.
  • The SetReaderOptions API lets you control convert mode (auto, image-only, render-all), output DPI, and annotation rendering.
  • Encrypted PDFs are supported by passing a password through the reader options.
  • Exported images are created as Blobs and downloaded client-side, making this approach suitable for privacy-sensitive workflows.

Common Developer Questions

  • How do I convert a PDF to JPG images using JavaScript in the browser?
  • Can I control the DPI resolution when rasterizing PDF pages to images in HTML5?
  • How do I handle encrypted or password-protected PDFs when converting to images?

Prerequisites

  • A modern web browser (Chrome, Firefox, Edge, or Safari)
  • Basic knowledge of HTML and JavaScript
  • A Dynamic Web TWAIN license key. Get a 30-day free trial license to follow along.

Step 1: Create the HTML File

Create a new HTML file with the following template:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Convert PDF to Images</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>
    </style>
  </head>
  <body>
    <div class="app">
    </div>
    <script>
    </script>
  </body>
</html>

Step 2: Include the Dynamic Web TWAIN Library

In the head of the HTML, include the library of Dynamic Web TWAIN via CDN.

<script src="https://unpkg.com/dwt@18.4.2/dist/dynamsoft.webtwain.min.js"></script>

Step 3: Initialize Dynamic Web TWAIN

  1. Add a container for holding the controls of Web TWAIN in HTML.

    <div class="viewer">
  <div id="dwtcontrolContainer"></div>
</div>

  2. Load Dynamic Web TWAIN and bind its controls to the container. A product key is needed (see the Prerequisites section above for a free trial license).

    let DWObject; //an instance of Web TWAIN
Dynamsoft.DWT.AutoLoad = false;
Dynamsoft.DWT.ProductKey = "LICENSE-KEY"; 
Dynamsoft.DWT.ResourcesPath = "https://unpkg.com/dwt@18.4.2/dist";
init();

function init(){
  Dynamsoft.DWT.Containers = [{ ContainerId: 'dwtcontrolContainer',Width: 270, Height: 350 }];
  Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', function () {
    DWObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer');
    DWObject.Viewer.width = "100%";
    DWObject.Viewer.height = "100%";
    DWObject.SetViewMode(1,1);
  });
  Dynamsoft.DWT.Load();
}

Step 4: Load and Rasterize PDF Files

Next, we can load PDF files into Web TWAIN’s buffer using its LoadImageEX method.

DWObject.IfShowFileDialog = true; //"Open File" dialog will be opened.
DWObject.LoadImageEx(
  "", //file name can be empty if "Open File" dialog is called.
  Dynamsoft.DWT.EnumDWT_ImageType.IT_PDF,
  function () {
    console.log("success");
  },
  function (errorCode, errorString) {
    console.log(errorString);
  }
);

There are several options we can configure for reading PDF files.

  • Convert Mode:
    • Image only. Directly extract the images in PDF files.
    • Render all. Render pages into images. The output image’s resolution and bit-depth might be different from its original values.
    • Auto. Automatically detect which mode to use based on whether the PDF page contains only one image.
  • Resolution: specify the DPI for the rendering of pages. Only valid using the “Render all” mode.
  • Render with annotations: render PDF annotations.
  • Password: for encrypted PDFs.

We can add controls for configuring the options before calling the LoadImageEX method.

HTML:

<div class="options">
  PDF Rasterizer Options:
  <br/>
  <label>
    Convert mode:
    <select id="modeSelect">
      <option>Auto</option>
      <option>Image only</option>
      <option>Render all</option>
    </select>
  </label>
  <br/>
  <label>
    Render annotations:
    <input type="checkbox" id="renderAnnotationCheckbox" />
  </label>
  <br/>
  <label>
    Password:
    <input type="password" id="password" />
  </label>
  <br/>
  <label>
    Resolution:
    <select id="resolutionSelect">
      <option>200</option>
      <option>300</option>
      <option>600</option>
    </select>
  </label>
</div>

JavaScript:

let convertMode;
let convertModeSelect = document.getElementById("modeSelect");
if (convertModeSelect.selectedIndex === 0) {
  convertMode = Dynamsoft.DWT.EnumDWT_ConvertMode.CM_AUTO;
}else if (convertModeSelect.selectedIndex === 1) {
  convertMode = Dynamsoft.DWT.EnumDWT_ConvertMode.CM_IMAGEONLY;
}else{
  convertMode = Dynamsoft.DWT.EnumDWT_ConvertMode.CM_RENDERALL;
}
let password = document.getElementById("password").value;
let renderAnnotations = document.getElementById("renderAnnotationCheckbox").checked;
let resolution = parseInt(document.getElementById("resolutionSelect").selectedOptions[0].innerText);
let readerOptions = {
    convertMode: convertMode,
    password: password,
    renderOptions: {
      resolution: resolution,
      renderAnnotations: renderAnnotations
    }
};
DWObject.Addon.PDF.SetReaderOptions(readerOptions);

Step 5: Export PDF Pages as JPG Images

Next, we can export the images in the buffer as JPG files. We have to convert them into blob and download them.

async function Download(){
  if (DWObject) {
    DWObject.IfShowFileDialog = false;
    for (let index = 0; index < DWObject.HowManyImagesInBuffer; index++) {
      DWObject.SelectImages([index]);
      let blob = await getBlob();
      downloadBlob((index+1)+".jpg",blob);
    }
  }
}

function downloadBlob(filename,blob){
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

function getBlob(){
  return new Promise((resolve, reject) => {
    if (DWObject.GetImageBitDepth(DWObject.CurrentImageIndexInBuffer) == 1) {
      //Convert black & white images to gray
      DWObject.ConvertToGrayScale(DWObject.CurrentImageIndexInBuffer);
    }
    DWObject.ConvertToBlob([DWObject.CurrentImageIndexInBuffer],Dynamsoft.DWT.EnumDWT_ImageType.IT_JPG,
      function(blob){
        resolve(blob);
      },
      function(_errorCode, errorString){
        reject(errorString);
      }
    )
  })
}

Common Issues and Edge Cases

  • Black-and-white PDFs producing blank JPGs: If a PDF page has a bit depth of 1 (pure black and white), it must be converted to grayscale before exporting as JPG. The code handles this with ConvertToGrayScale, but if you skip that step, the output may appear blank or corrupt.
  • Encrypted PDF fails to load: If you attempt to load a password-protected PDF without providing the correct password via SetReaderOptions, the LoadImageEx callback will return an error. Always prompt the user for a password or handle the error gracefully.
  • Low-resolution output images: When using “Render all” convert mode, the default resolution may be lower than expected. Set the resolution option explicitly (e.g., 300 or 600 DPI) in SetReaderOptions to get higher-quality output.

Source Code

Get the source code of the demo to have a try:

https://github.com/tony-xlh/PDF2Image