Resources Base
DWT
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.
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. This viewer uses the default settings and normally is enough to handle the data visualization.
However, if you want to customize the viewer, you can use Dynamsoft.WebTwainEnv.CreateDWTObjectEx()
to create a WebTwain
instance that doesn’t come with a viewer and 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.WebTwainEnv.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);
}
);
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.Viewer.bind(document.getElementById('dwtcontrolContainer'));
DWObject.Viewer.height = 600;
DWObject.Viewer.width = 800;
DWObject.Viewer.show();
A: The thumbnails viewer can be customized during the creation before it’s shown. Check out * createThumbnailViewer() for more information.
var DWObject = null;
Dynamsoft.WebTwainEnv.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({
location: 'left',
size: '20%',
columns: 1,
rows: 4,
scrollDirection: 'vertical'
});
thumbnailViewer.show();
DWObject.Viewer.show();
},
function(err) {
console.log(err);
}
);
You can use the Viewer
in the following ways
You can use the mouse, the arrow keys or the APIs first()
, next()
, previous()
, last()
and gotoPage()
to navigate through the images in buffer.
You can change the view mode to show one or multiple images. The API is setViewMode()
.
The image in the viewer can fit to the width or height of the viewer or both. The API is fitWindow()
.
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.
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.
You can use the API setSelectedAreas()
.
You can call the method unbind()
on a WebTwain
instance to unbind and destroy its viewer.
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.
The following code shows how to use the image editor. Read more on createImageEditor()
.
var editorSettings = {
/*element: document.getElementById("imageEditor"),
width: 600,
height: 400,*/
border: '1px solid rgb(204, 204, 204)',
topMenuBorder: '',
innerBorder: '',
background: "rgb(255, 255, 255)",
promptToSaveChange: true,
buttons: {
titles: {},
visibility: {}
},
dialogText: {
dlgRotateAnyAngle: ['Angle :', 'Interpolation:', 'Keep size', ' OK ', 'Cancel'],
dlgChangeImageSize: ['New Height :', 'New Width :', 'Interpolation method:', ' OK ', 'Cancel'],
saveChangedImage: ['You have changed the image, do you want to keep the change(s)?', ' Yes ', ' No '],
selectSource: ['Select Source:', 'Select', 'Cancel', 'There is no source available']
}
};
var imageEditor = DWObject.Viewer.createImageEditor(editorSettings);
imageEditor.show();
A: Yes, the Image Editor is availabe on all platforms where DWT
is supported. However, while it is built into the browser page in most cases, it is invoked by a different API and runs as a separate programme if DWT
ActiveX edition is used. Contact Dynamsoft Support to learn more.
A: Yes, as shown in the sample code above, you can use the parameters titles
and dialogText
to specify the language used in the editor
A: While you can use visibility
(as shown in the sample code above) to remove a default button(s), currently you cannot add a custom button yet.
A: Yes, as shown in the sample code above, you can use the parameter element
to specify where the editor is created and then use width
and height
to specify its size.
A: Yes, as shown in the sample code above, the parameters border
, topMenuBorder
, innerBorder
and
background
can be used to specify the style including color of the editor.
latest version