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.

Solutions

Option 1: Automatically change the viewer size when the browser's size has changed

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:

<body onresize="changesize()">
<input type="button" value="Scan" onclick="AcquireImage();" />
<div id="dwtcontrolContainer"></div>
<script type="text/javascript">
Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady);
    var DWObject;
function Dynamsoft_OnReady() {
     DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
}

function AcquireImage() {
    if (DWObject) {
    var bSelected = DWObject.SelectSource();
    if(bSelected){
    var OnAcquireImageSuccess, OnAcquireImageFailure;
    OnAcquireImageSuccess = OnAcquireImageFailure= function (){
    DWObject.CloseSource();
};

    DWObject.OpenSource();
    DWObject.IfDisableSourceAfterAcquire = true;

    DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
    }
  }
}

function changesize() {
    var width = window.outerWidth*0.3;
    var height = window.outerHeight*0.3;
    DWObject.Width=width.toString()+"px";
    DWObject.Height=height.toString()+"px"; //you can also write your own function to achieve

}


</script>
</body>

Option 2: Set the viewer size when the page is opened based upon the size of the window

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.

Is this page helpful?

Leave a Reply

Your email address will not be published.