How to Display TIFF in the Browser

Tag Image File Format, abbreviated TIFF or TIF, is an image file format for storing raster graphics images. It has several differences from most other image file formats:

  1. TIFF allows a flexible set of information fields called tags.
  2. TIFF allows a flexible combination of colorspace, bitdepth/datatype, and compression scheme.
  3. TIFF supports multi-page. It can store multiple images in a single file.

Due to the flexibility of TIFF, most browsers do not support this format. So how to display a TIFF file in the browser? We can convert TIFF files to JPG files for display. This can be done at the server side or directly in the browser with a third-party library. Dynamic Web TWAIN is a document scanning SDK which supports various image formats and TIFF is supported as well. It uses libTIFF as the backend and compiles it into WebAssembly for browsers to use.

In this article, we are going to talk about how to display TIFF in the browser with it.

Create a New Web Page

Create a new web page with the following template.

<!DOCTYPE html>
<html>
<head>
  <title>TIFF Viewer Example</title>
  <style>
  </style>
</head>
<body>
  <script type="text/javascript">
  </script>
</body>
</html>

Include Dynamic Web TWAIN

Add the following line in the head to include Dynamic Web TWAIN:

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

Initialize Dynamic Web TWAIN

Create a new instance of Dynamic Web TWAIN and name it DWObject. We can use it to load and convert images as well as scan documents. A license is required to use Dynamic Web TWAIN. You can apply for a license here.

let DWObject;
Dynamsoft.DWT.AutoLoad = false;
Dynamsoft.DWT.Containers = [];
Dynamsoft.DWT.ResourcesPath = "https://unpkg.com/dwt@18.0.2/dist";
Dynamsoft.DWT.UseLocalService = false;
Dynamsoft.DWT.ProductKey = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ=="; //one-day trial

init();

function init(){
  Dynamsoft.DWT.CreateDWTObjectEx(
    {
      WebTwainId: 'dwtcontrol'
    },
    function(obj) {
      DWObject = obj;
    },
    function(err) {
      console.log(err);
    }
  );
}

Load TIFF Images

We can load TIFF images by selecting a local file or loading from a remote URI.

HTML:

<ol>
  <li>
    <label>
      Select a TIFF file to load:
      <input type="file" id="file" onchange="tiffSelected();" accept=".tiff,.tif"/>
    </label>
  </li>
  <li>
    <input type="text" id="url" value="ycbcr.tif"/>
    <button onclick="loadRemoteImage();">Load a remote image</button>
    <span id="status"></span>
  </li>
</ol>

JavaScript:

function tiffSelected(){
  let files = document.getElementById("file").files;
  if (files.length>0 && DWObject) {
    let file = files[0];
    //get the content of the TIFF file
  }
}
    
function loadRemoteImage(){
  let xhr = new XMLHttpRequest();
  xhr.responseType = 'arraybuffer';
  xhr.open('GET', document.getElementById("url").value);
  xhr.onload = function (e) {
    //get the content of the TIFF file
  };
  xhr.onerror = function(){
    status.innerText = "Error";
  }
  xhr.send();
}

Load TIFF Images to Dynamic Web TWAIN and Display Them

  1. Load TIFF images into the buffer of Dynamic Web TWAIN.

    function loadTiff(file){
  DWObject.RemoveAllImages();
  DWObject.LoadImageFromBinary(file,
    function () {
      console.log("success");
    },
    function (errorCode, errorString) {
      console.log(errorString);
    }
  );
}

  2. Convert the images in the buffer into JPG and display them in a viewer.

    async function displayImagesInBuffer(){
  let viewer = document.getElementsByClassName("tiff-viewer")[0];
  viewer.innerHTML = "";
  for (let index = 0; index < DWObject.HowManyImagesInBuffer; index++) {        
    let dataURL = await getImageAsDataURL(index);
    let img = document.createElement("img");
    img.src = dataURL;
    viewer.appendChild(img);
  }
}
   
function getImageAsDataURL(index){
  return new Promise(async (resolve, reject) => {
    await ConvertToGrayScaleIfBW(index);
    DWObject.ConvertToBase64(
      [index],
      Dynamsoft.DWT.EnumDWT_ImageType.IT_JPG,
      function (result, indices, type) {
        resolve("data:image/jpeg; base64,"+result.getData(0, result.getLength()))
      },
      function (errorCode, errorString) {
        reject(errorString);
      }
    );
  })
}

async function ConvertToGrayScaleIfBW(index) {
  return new Promise((resolve, reject) => {
    //Check if the image is B&W. 1 is B&W, 8 is Gray, 24 is RGB
    if (DWObject.GetImageBitDepth(index) == 1) {
      //If so, convert the image to gray since only 24-bit true color bmp and 8-bit gray-scaled image are supported for JPEG compression.
      DWObject.ConvertToGrayScale(index,
      function(){
        resolve();
      },
      function(errorCode,errorString){
        reject(errorString);
      });  
    }else{
      resolve();
    } 
  })
}

    HTML and CSS of the viewer:

    <div class="tiff-viewer"></div>
<style>
  .tiff-viewer {
    width: 270px;
    height: 360px;
    border: 1px solid gray;
    overflow-y: auto;
  }

  .tiff-viewer img {
    width: calc(100% - 20px);
    padding: 10px;
  }
<style>

We’ve now finished the demo. You can visit the online demo to have a try.

Use Dynamic Web TWAIN’s Built-in Viewer

Dynamic Web TWAIN comes with a built-in viewer. We can bind the DWObject with a viewer and it can display the images in the buffer.

We just need to add the following lines to bind a viewer:

 function init(){
   Dynamsoft.DWT.CreateDWTObjectEx(
     {
       WebTwainId: 'dwtcontrol'
     },
     function(obj) {
       DWObject = obj;
+      DWObject.Viewer.bind(document.getElementById('dwtcontrolContainer'));
+      DWObject.Viewer.show();
     },
     function(err) {
       console.log(err);
     }
   );
 }

After an image is loaded, the viewer will automatically display it. The viewer also comes with image editing features like crop, rotate and zoom.

Online demo

Source Code

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

https://github.com/tony-xlh/TIFF-Viewer/

If you need to scan documents to TIFF, check out this article.

Appendix

Colorspaces supported by TIFF:

  • WhiteIsZero
  • BlackIsZero
  • RGB
  • RGB Palette
  • Transparency mask
  • CMYK
  • YCbCr
  • CIELab

Compression schemes supported by TIFF:

  • Uncompressed
  • CCITT 1D
  • Group 3 Fax
  • Group 4 Fax
  • LZW
  • JPEG
  • PackBits