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.


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 


function MouseWheelHandler(e) { 
      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