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.

Is this page helpful?

Leave a Reply