How to Scan Documents to Multi-Page TIFF in JavaScript from a Browser

Tag Image File Format, abbreviated TIFF or TIF, is an image file format for storing raster graphics images. It is a complex format, defining many tags in each file. TIFF was created as an attempt to get desktop scanner vendors of the mid-1980s to agree on a common scanned image file format, in place of a multitude of proprietary formats. A TIFF file can be a container holding JPEG (lossy) and PackBits (lossless) compressed images.1 We can scan documents and then save the results to a multi-page TIFF file.

Dynamic Web TWAIN has good support for the TIFF format. In this article, we are going to create a demo web app to illustrate how to use it to scan documents and save them as a TIFF file.

What you’ll build: A browser-based document scanning web app that captures pages from a TWAIN scanner and saves them as a multi-page TIFF file with configurable compression and custom metadata tags, using Dynamic Web TWAIN.

Key Takeaways

  • Dynamic Web TWAIN’s SaveAllAsMultiPageTIFF method lets you save scanned documents as a single multi-page TIFF file directly from the browser.
  • TIFF supports 8 compression types in Dynamic Web TWAIN, including lossless (TIFF_LZW, TIFF_T6) and lossy (TIFF_JPEG) options.
  • Custom TIFF tags can be embedded via SetTiffCustomTag to store metadata such as document origin or batch ID.
  • For workflows that need searchable text or encryption, PDF may be a better choice — Dynamic Web TWAIN supports both formats.

Common Developer Questions

  • How do I scan documents to multi-page TIFF from a browser in JavaScript?
  • What TIFF compression type should I use for scanned documents?
  • How do I add custom metadata tags to a TIFF file using Dynamic Web TWAIN?

Build a Browser-Based Multi-Page TIFF Scanner

Let’s do this in steps.

Step 1: Set Up the Dynamic Web TWAIN SDK

  1. Download and install Dynamic Web TWAIN from here. Get a 30-day free trial license for Dynamic Web TWAIN.
  2. Create a new folder for storing the web pages and put the Resources folder of Dynamic Web TWAIN in that folder.
  3. Copy the CustomScan.html to the folder as the base for the web app.

The CustomScan.html is a basic demo which lets you choose which scanner to use and configure the scan options like resolution, pixel type and auto feeder.

Screenshot:

DWT Custom Scan Demo

Step 2: Save Scanned Documents as a Multi-Page TIFF File

Next, we are going to add a save button to save documents as a multi-page TIFF file.

HTML:

<input type="button" value="Save as TIFF" onclick="Save();" />

JavaScript:

function Save(){
  if (DWObject) {
    let OnSuccess = function () {
      alert("Success");
    };
    let OnFailure = function () {
      alert("Fail");
    };
    
    DWObject.SaveAllAsMultiPageTIFF("DynamicWebTWAIN.tiff", OnSuccess, OnFailure);
  }
}

Step 3: Configure TIFF Compression Settings

TIFF supports multiple compression types. In Dynamic Web TWAIN, there are 8 compression types you can use.

Label Value
TIFF_AUTO 0
TIFF_NONE 1
TIFF_RLE 2
TIFF_FAX3 3
TIFF_T4 3
TIFF_FAX4 4
TIFF_T6 4
TIFF_LZW 5
TIFF_JPEG 7
TIFF_PACKBITS 32773

You can specify it with the following sample code:

let compressionType = 0; //Dynamsoft.DWT.EnumDWT_TIFFCompressionType.TIFF_AUTO
DWObject.TIFFCompressionType = compressionType;

Here are the detailed usage notes:

When set to TIFF_AUTO (0), 1-bit images will be compressed in TIFF_T6 (4) while images with other bit depth will be compressed in TIFF_LZW (5).

When set to TIFF_JPEG (7), 1-bit images will be compressed in TIFF_T6 (4), color images or grey images (8-bit or higher) in TIFF_JPEG (7) standard, and other images by TIFF_LZW (5).

TIFF_T4 (3) and TIFF_FAX3 (3) are two names for the same compression type. So are TIFF_T6 (4) and TIFF_FAX4 (4).

TIFF_RLE (2), TIFF_T4 (3), TIFF_FAX3 (3) and TIFF_PACKBITS (32773) only support compression of 1-bit images. TIFF_JPEG (7) supports compression of 8-bit above color images and 8-bit grey images.

When TIFF_JPEG (7) is used, you can use JPEGQuality to further reduce the size of the TIFF file.

In the web page, add a select for the compression type, a input for setting the JPEG quality and update them in the save function.

TIFF Compression Type:
<select size="1" id="compressionType">
  <option value="0">TIFF_AUTO</option>
  <option value="1">TIFF_NONE</option>
  <option value="2">TIFF_RLE</option>
  <option value="3">TIFF_FAX3</option>
  <option value="3">TIFF_T4</option>
  <option value="4">TIFF_FAX4</option>
  <option value="4">TIFF_T6</option>
  <option value="5">TIFF_LZW</option>
  <option value="7">TIFF_JPEG</option>
  <option value="32773">TIFF_PACKBITS</option>
</select>

<script>
function Save(){
  if (DWObject) {
    let OnSuccess = function () {
      alert("Success");
    };
    let OnFailure = function () {
      alert("Fail");
    };
    //https://www.dynamsoft.com/web-twain/docs/info/api/Dynamsoft_Enum.html#dynamsoftdwtenumdwt_tiffcompressiontype
    //https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_IO.html#tiffcompressiontype
    let compressionType = document.getElementById("compressionType").selectedOptions[0].value;
    DWObject.TIFFCompressionType = compressionType;
    let JPEGQuality = document.getElementById("JPEGQuality").value;
    DWObject.JPEGQuality = JPEGQuality;
    DWObject.SaveAllAsMultiPageTIFF("DynamicWebTWAIN.tiff", OnSuccess, OnFailure);
  }
}
</script>

Step 4: Add Custom TIFF Tags for Metadata

We can also set a custom tag for the TIFF to store extra info.

  1. Add a input in the HTML:

    Custom TIFF Tag:
<input type="text" id="customTag">

  2. In the save function, set the tag with the data and ID 700 (e.g.) in the TIFF file.

    DWObject.ClearTiffCustomTag(); //clear before setting
let customTag = document.getElementById("customTag").value;
if (customTag) {
  DWObject.SetTiffCustomTag(700, customTag, false); //https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_IO.html#settiffcustomtag
}

We can then use Python’s tifftools library to read the output TIFF file to check whether it has the tag:

>>> info = tifftools.read_tiff('DynamicWebTWAIN.tiff')
>>> info["ifds"][0]["tags"][700]
{'datatype': 1, 'count': 15, 'datapos': 5802, 'offset': 5826, 'data': [67, 114, 101, 97, 116, 101, 100, 32, 98, 121, 32, 68, 87, 84, 0]}

When to Use TIFF vs. PDF for Document Scanning

Both TIFF and PDF can be used to store multiple document images in one file. TIFF can store lossless images while PDF has more capabilities like searchable text and encryption. Dynamic Web TWAIN supports both formats and you can choose which format to use based on your needs.

Common Issues and Edge Cases

  • 1-bit images and compression mismatch: If you select TIFF_JPEG compression for a 1-bit (black & white) scanned image, Dynamic Web TWAIN will silently fall back to TIFF_T6. Use TIFF_AUTO to let the SDK pick the best compression per image.
  • Large multi-page files: Saving dozens of high-resolution color pages with TIFF_NONE (uncompressed) can produce files exceeding 1 GB. Use TIFF_LZW for lossless compression or TIFF_JPEG with a JPEGQuality value of 60–80 to balance quality and file size.
  • Custom tag ID conflicts: TIFF tag IDs below 32768 are reserved by the TIFF specification. Using an ID like 700 (as in this tutorial) works for private use, but production workflows should use IDs in the 32768–65535 private range to avoid conflicts with future TIFF extensions.

Source Code

You can see the entire HTML file here: https://github.com/tony-xlh/Dynamic-Web-TWAIN-samples/blob/main/TIFF/index.html

References

  1. https://en.wikipedia.org/wiki/TIFF ↩