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