How to Scan Documents to Multi-Page TIFF Files from Browsers

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.

Getting Started With Dynamic Web TWAIN

Dynamic Web TWAIN  

Demo Web App which Scans Documents to Multi-Page TIFF Files

Let’s do this in steps.

Preparation

  1. Download and install Dynamic Web TWAIN from here.
  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

Save the 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);
  }
}

Specify the Compression Type of TIFF

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>

Add a Custom TIFF Tag

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]}

TIFF and PDF

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.

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 ↩