Viewer

Dynamic Web TWAIN has a Viewer component to help visualize the data in the buffer. By default, it is created with basic settings for each WebTwain instance. However, it can be customized to fit different usage scenarios.

Create the Viewer

Built-in viewer that comes with the WebTwain instance

As mentioned in creating the WebTwain instance, a new WebTwain instance (or a new Dynamic Web TWAIN object) usually comes with an already-bound viewer which is an instance of the Viewer component. This viewer uses the default settings and normally is enough to handle the data visualization.

Customize the Built-in Viewer

The viewer is created inside a given HTMLDivElement specified by its id .

If a WebTwain instance is created with a built-in viewer, you can specify the initial size of the viewer during the creation. For example, the following configuration specifies a 585px by 513px viewer to be created in the HTMLDivElement with the id “dwtcontrolContainer1”.

Dynamsoft.DWT.Containers = [{
    ContainerId: 'dwtcontrolContainer1',
    Width: '585px',
    Height: '513px'
}]

Create a viewer and bind a viewer-less WebTwain Instance

Create a Viewer-less WebTwain Instance

If you want to further customize the viewer, you can use Dynamsoft.DWT.CreateDWTObjectEx() to create a WebTwain instance that doesn’t come with a viewer.

Bind a Viewer

You can then bind and customize the viewer before showing it with the APIs bind() and show() . For example, the following code shows a viewer with thumbnails

var DWObject = null;
Dynamsoft.DWT.CreateDWTObjectEx({
        WebTwainId: 'dwtcontrol'
    },
    function(obj) {
        DWObject = obj;
        DWObject.Viewer.bind(document.getElementById('dwtcontrolContainer'));
        DWObject.Viewer.height = 600;
        DWObject.Viewer.width = 800;
        var thumbnailViewer = DWObject.Viewer.createThumbnailViewer();
        thumbnailViewer.show();
        DWObject.Viewer.show();
    },
    function(err) {
        console.log(err);
    }
);

Use the Viewer

You can use the Viewer in the following ways

Navigate through all images

You can use the mouse, the arrow keys or the APIs first() , next() , previous() , last() and gotoPage() to navigate through the images in buffer.

Show one or multiple images in one view

You can change the view mode to show one or multiple images. The API is setViewMode() .

Fit one image to the view

The image in the viewer can fit to the width or height of the viewer or both. The API is fitWindow() .

Show the image in its actual size

You can show the image in its actual size by setting zoom to 1. This is only supported when the view mode is set to -1 x -1.

Zoom in to see more details of an image

To do this, you just set a bigger or smaller value to zoom . This is only supported when the view mode is set to -1 x -1.

Select an area

You can use the API setSelectedAreas() .

Unbind the Viewer

You can call the method unbind() on a WebTwain instance to unbind and destroy its viewer.

The Image Editor

The Image Editor is a built-in UI that contains the most commonly used editing functions. If you don’t want to build your own specific UI, you can give it a try and see if it meets your requirements.