How to Convert PDF to Images in HTML5

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

New HTML File

Create a new HTML file with the following template:

<!DOCTYPE html>
<html lang="en">
    <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">
    <div class="app">

Include Dynamic Web TWAIN

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

<script src=""></script>

Initialize Dynamic Web TWAIN

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

    <div class="viewer">
      <div id="dwtcontrolContainer"></div>
  2. Load Dynamic Web TWAIN and bind its controls to the container. A product key is needed. You can apply for one here.

    let DWObject; //an instance of Web TWAIN
    Dynamsoft.DWT.AutoLoad = false;
    Dynamsoft.DWT.ProductKey = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ=="; //one-day trial
    Dynamsoft.DWT.ResourcesPath = "";
    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%";

Load 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.
  "", //file name can be empty if "Open File" dialog is called.
  function () {
  function (errorCode, 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.


<div class="options">
  PDF Rasterizer Options:
    Convert mode:
    <select id="modeSelect">
      <option>Image only</option>
      <option>Render all</option>
    Render annotations:
    <input type="checkbox" id="renderAnnotationCheckbox" />
    <input type="password" id="password" />
    <select id="resolutionSelect">


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;
  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

Export as JPG Files

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++) {
      let blob = await getBlob();

function downloadBlob(filename,blob){
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob); = filename;

function getBlob(){
  return new Promise((resolve, reject) => {
    if (DWObject.GetImageBitDepth(DWObject.CurrentImageIndexInBuffer) == 1) {
      //Convert black & white images to gray
      function(_errorCode, errorString){

Source Code

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