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