Dynamic Web TWAIN: How to resize the viewer automatically?

Scenario

When using Dynamic Web TWAIN in different environments it may be necessary to change the size of the viewer within the window automatically.

Steps

This can be done two different ways

  1. Set the viewer size when the page is opened based upon the size of the window
  2. Change the viewer size when the window size is adjusted based on the new size of the window

For option 1:

You may change the container size based on the window size by setting the following in your javascript file (before any other Dynamsoft-related operations):

Dynamsoft.WebTwainEnv.Containers = [{ContainerId:'dwtcontrolContainer', Width:window.innerWidth, Height:window.innerHeight}];

and in dynamsoft.webtwain.config.js file set:

Dynamsoft.WebTwainEnv.Containers = [];

Note: window.innerWidth and window.innerHeight do not work in IE. You can replace it with document.documentElement.clientWidth and document.documentElement.clientHeight.

For option 2:

Write your own function to calculate the Container's width and height according to the browser's size. Then assign the value to our APIs Height &Width. Finally use the event onresize to trigger the function.