How to use mouse wheel to zoom in Dynamic Web TWAIN

Using Dynamic Web TWAIN is possible to zoom in and out on images that you have loaded into your application. In order to do so you must use external JavaScript event handlers.  The following code snippets will show you how to use the mouse wheel to zoom in and out at increments.

Dynamsoft_OnReady

function Dynamsoft_OnReady() { 
   DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer' 
   DWObject.Width = 400; // Set the width of the Dynamic Web TWAIN Object 
   DWObject.Height = 592; // Set the height of the Dynamic Web TWAIN Object 
   DWObject.SetViewMode(-1, -1); 
   DWObject.Zoom = .15; 
      if (DWObject) { 
         DWObject.RegisterEvent('OnPostAllTransfer', function () { // Register OnPostAllTransfers event. This event fires when all pages have been scanned and transferred 
         alert("The event OnPostTransfer is fired."); // You can register other events here as well. Please check out 'Handling Events' in Developer's Guide 
      }); 
      var imageZoom = document.getElementById("dwtcontrolContainer"); 
      if (imageZoom.addEventListener) { 
         imageZoom.addEventListener("mousewheel", MouseWheelHandler, false);// New Ie, Chrome, Safari, Opera 
         imageZoom.addEventListener("DOMMouseScroll", MouseWheelHandler, false);//Firefox 
      } 
      else imageZoom.attachEvent("onmousewheel", MouseWheelHandler); // Old IE 
   }
}

MouseWheelHandler

function MouseWheelHandler(e) { 
   if(DWObject){ 
      var e = window.event || e; // For old IE 
      var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); //set delta to either 1 or -1 depending on mousehweel up or down. 
      DWObject.Zoom = DWObject.Zoom * (1 + (delta / 10));//update zoom to be either 1.1 or .9 of the current zoom 
   } 
   return false; 
}

Note: Depending on the browser this may only work when not moused over the actual image.

Please download the sample code via the link below:
Use mousewheel to zoom

Is this page helpful?

Leave a Reply

Your email address will not be published.