Introduction
Document management is a big challenge nowadays, especially
for paper-heavy industries like healthcare, financial, government etc. You may
want to develop a document imaging application which allows users, either using
Windows or Mac OS, to easily scan documents or capture images via browsers, so that
you can manage the documents/records more efficiently.
The article will show you how to develop a cross-platform
document imaging solution that works with all mainstream browsers by using
ImageCapture Suite.
Background
Dynamsoft’s ImageCapture Suite is a browser-based document
imaging library. It allows you to capture
images from scanners, webcams and other TWAIN/UVC/WIA compatible devices on
Windows or Mac. If you are interested in the SDK, the 30-day Free Trial can be
downloaded from Dynamsoft website.
Key Features
-
Capture
images/documents from scanners, webcams and other TWAIN/WIA/UVC compatible
imaging devices.
-
Compatible
with the mainstream browsers including IE (both 32-bit & 64-bit), Firefox,
Chrome, Safari and Opera on Windows and Mac.
-
Edit
images: Crop, Change Image Size, Rotate, Zoom, Erase and more.
-
Upload
images to various locations - local folder, FTP site, web server, database,
SharePoint library and more.
-
Enhanced
security: supports SSL and Windows/Forms/Basic Authentication.
-
Supported
image formats include BMP, JPEG, PNG, TIFF (both single and multi-page) and PDF
(both single and multi-page).
Using the Code
Cross platform & cross browser support
ImageCapture Suite comes with 3 editions for different
users:
ActiveX Edition – works with 32-bit or 64-bit Internet
Explorer
Plugin Edition – works with Chrome, Firefox, Safari, Opera on Windows
Mac Edition – works with Chrome, Firefox, Safari, Opera on Mac
To
make your web application work with all the mainstream browsers on Windows or
Mac, you can detect the OS and browser type in JavaScript and load the
corresponding edition of ImageCapture Suite.
function DW_PageonloadInner() {
ua = (navigator.userAgent.toLowerCase());
if (ua.indexOf("wow64") == -1) {
var samplesource32bitCtr = document.getElementById("samplesource32bit");
if (samplesource32bitCtr)
samplesource32bitCtr.href = "http://www.dynamsoft.com/demo/DWT/Sources/twainkit.exe";
}
if (ua.indexOf("msie") != -1)
DW_InIE = true;
else
DW_InIE = false;
if (ua.indexOf("macintosh") != -1)
DW_InWindows = false;
else
DW_InWindows = true;
if (ua.indexOf("win64") != -1 && ua.indexOf("x64") != -1)
DW_InWindowsX86 = false;
else
DW_InWindowsX86 = true;
var varShowDetail = document.getElementById("showDetail");
if (varShowDetail && DW_InIE == true) {
varShowDetail.style.display = "";
}
InitMenum();
}
function DW_CreateControl(bNeebBack) {
var objString = "";
var DWTContainer;
if (DW_InIE) {
objString = "<object id='" + DW_ObjectName + "' style='width:" + DW_Width + "px;height:" + DW_Height + "px'";
if (DW_InWindowsX86)
objString += "codebase='" + DW_CABX86Path + "#version=" + DW_VersionCode + "' ";
else
objString += "codebase='" + DW_CABX64Path + "#version=" + DW_VersionCode + "' ";
var temp = DW_IsTrial ? DW_TRAILCLASSID : DW_FULLCLASSID;
objString += " classid='clsid:" + temp + "' viewastext>";
objString += " <param name='Manufacturer' value='DynamSoft Corporation' />";
objString += " <param name='ProductFamily' value='" + DW_ProductName + "' />";
objString += " <param name='ProductName' value='" + DW_ProductName + "' />";
objString += " </object>";
}
else {
objString = " <embed id='" + DW_ObjectName + "'style='display: inline; width:" + DW_Width + "px;height:" + DW_Height + "px' id='" + DW_ObjectName + "' type='" + DW_MIMETYPE + "'";
objString += " OnPostTransfer='Dynamsoft_OnPostTransfer' OnPostAllTransfers='Dynamsoft_OnPostAllTransfers'";
objString += " OnMouseClick='Dynamsoft_OnMouseClick' OnPostLoad='Dynamsoft_OnPostLoadfunction'";
objString += " OnImageAreaSelected = 'Dynamsoft_OnImageAreaSelected'";
objString += " OnImageAreaDeSelected = 'Dynamsoft_OnImageAreaDeselected'";
objString += " OnMouseDoubleClick = 'Dynamsoft_OnMouseDoubleClick'";
objString += " OnMouseRightClick = 'Dynamsoft_OnMouseRightClick'";
objString += " OnTopImageInTheViewChanged = 'Dynamsoft_OnTopImageInTheViewChanged'";
objString += " OnGetFilePath='Dynamsoft_OnGetFilePath'";
if (DW_InWindows)
objString += " pluginspage='" + DW_MSIPath + "'></embed>";
else
objString += " pluginspage='" + DW_PKGPath + "'></embed>";
}
DWTContainer = document.getElementById(DW_DWTContainerID);
DWTContainer.innerHTML = objString;
DWObject = document.getElementById(DW_ObjectName);
}
Acquire Images from scanners or webcams
In relative terms, TWAIN and Webcam protocols are both special
areas which would cost a lot of time to become familiar with. It might take
months to code your application from scratch.
However, with ImageCapture Suite, you would be able to
complete the document scanning or image capture coding in hours.
You can customize the scanning properties, such as Resolution,
pixel type, Brightness, Contrast etc. in your code. You can also set the
scanning settings by showing the user interface of the source.
function AcquireImageInner(){
if (DW_DWTSourceContainerID == "")
DWObject.SelectSource(); else
DWObject.SelectSourceByIndex(document.getElementById(DW_DWTSourceContainerID).selectedIndex);
DWObject.CloseSource();
DWObject.OpenSource();
var iSelectedIndex = document.getElementById(DW_DWTSourceContainerID).selectedIndex;
var iTwainType = DWObject.GetSourceType(iSelectedIndex);
if(iTwainType == 0)
{
DWObject.IfShowUI = document.getElementById("ShowUI").checked;
var i;
for(i=0;i<3;i++)
{
if(document.getElementsByName("PixelType").item(i).checked==true)
DWObject.PixelType = i;
}
DWObject.Resolution = Resolution.value;
DWObject.IfFeederEnabled = document.getElementById("ADF").checked ;
DWObject.IfDuplexEnabled = document.getElementById("Duplex").checked ;
AppendMessage("Pixel Type: " + DWObject.PixelType + "<br />Resolution: " + DWObject.Resolution + "<br />");
}
else
{
DWObject.IfShowUI = document.getElementById("ShowUIForWebcam").checked;
if (DW_InWindows) {
DWObject.SelectMediaTypeByIndex(document.getElementById("MediaType").selectedIndex);
DWObject.SelectResolutionForCamByIndex(document.getElementById("ResolutionWebcam").selectedIndex);
}
DWObject.IfDisableSourceAfterAcquire = true;
DWObject.AcquireImage(); }
Run or deploy the application on web server
The complete source code can be downloaded from the article.
The sample includes features, such as capture images from scanner or webcam,
edit and save the images to local disk.
To run the sample application with a valid trial license or
customize the web application, you can download ImageCapture Suite from Dynamsoft’s
website.
ImageCapture Suite 30-Day Free Trial
Download
To test the document imaging features from different client
machines, you can simply copy the sample code to your web server (IIS, Apache
or Tomcat). Users will only need to download and install the ActiveX/Plugin in
the browser on the first visit of the web page. More
details
The online demo is also available for your reference.
ImageCapture Suite Online Demo