Viewer

DWT has a Viewer component to help visualize the data in the buffer. The component also comes with a built-in Image Editor UI which makes things easier for customers to implement editing functions.

Bind the Viewer

As mentioned in creating the WebTwain instance, a new WebTwain instance (or a new DWT object) usually comes with a ready-bound viewer which is an instance of the Viewer component. Only when you use Dynamsoft.WebTwainEnv.CreateDWTObjectEx() for the instantiation will you be able to get a WebTwain instance that doesn’t come with a viewer. In this case, you can still call the method BindViewer() to create and bind a Viewer instance.

Customize the 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.WebTwainEnv.Containers = [{
    ContainerId: 'dwtcontrolContainer1',
    Width: '585px',
    Height: '513px'
}]

If the viewer is bound after the creation of the WebTwain instance, the following does the same thing

DWObject.BindViewer('dwtcontrolContainer1', {
    Height: 513,
    Width: 585
});

After the initial binding, you can still call the method UpdateViewer() to customize the viewer. For example, the following changes the size of the viewer and enables dual-viewer mode at the same time

DWObject.UpdateViewer({
    Height: "500px",
    Width: "700px",
    view: {
        // Show the 2nd viewer
        bShow: true,
        // The 2nd viewer takes up 80% of the viewer width
        Width: "80%"
    }
});

Use the Viewer

You can use the Viewer in the following ways

Navigate through all images

You can use the mouse or arrow keys 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 APIs are IfFitWindow and FitWindowType .

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 SetSelectedImageArea() .

Unbind the Viewer

You can call the method UnbindViewer() 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.

How to show or hide the Image Editor

The Image Editor can be opened by the API ShowImageEditor() .