Introduction
It’s
common (however not easy) to enable a web application to control both cameras
and scanners. For instance, an application designed for healthcare will have a
patient’s photograph taken at the check-in desk and then store the photo in the patient’s medical
file on the server. The report can be scanned and uploaded at a later time.
Dynamsoft’s
ImageCapture
Suite is a browser plug-in especially designed for capturing
images/documents from both webcams and scanners. The component is compatible
with Internet Explorer (both 32-bit and 64-bit), Firefox, Chrome, Safari and
Opera and provides the most comprehensive support for imaging devices.
Key Features
-
Capture images from cameras (both build-in and digital), scanners
and other TWAIN/WIA/UVC compatible devices.
- Compatible with Internet Explorer (both 32-bit and 64-bit),
Firefox, Chrome, Safari and Opera on Windows.
- Edit captured images: Crop, Change Image Size, Rotate, Deskew and
more.
- Upload the images to a local
folder, web server, FTP site, SharePoint library, database and other systems.
- Supported image format include BMP, JPEG, PNG, TIFF (both single
and multi-page) and PDF (both single and multi-page).
- Upload extra text info along with the image(s).
- Robust security features. Support SSL and Windows/Forms/Basic
Authentication.
-
The 1D & 2D Barcode Reader and OCR add-ons are both provided as
additional choices for you.
Image Capture & Upload
The
following sections will show you how to integrate
Dynamsoft’s ImageCapture Suite into your web
application, how to implement image/document
acquisition and how to store the scanned images
to a web server. However, first please make sure that you’ve installed the SDK
onto your development machine. If you haven’t yet to do so, here is the
download link: ImageCapture
Suite 30-Day Free Trial Download.
- Integrate
ImageCapture Suite to your web application.
The SDK provides two editions for different browsers.
-
ActiveX Edition: for 32-bit & 64-bit IE on Windows
- plug-in Edition: for Firefox, Chrome, Safari and Opera on Windows
It’s
simple to embed both of the editions onto one web page, providing your
customers the convenience of not needing to access multiple pages to scan
images in different browsers.
Plug-in Edition: Add the following <embed>
tag to your source code.
<embed type = "Application/ImageCaptureSuite-Plugin" id="DWObject"
OnPostTransfer = "Dynamsoft_OnPostTransfer"
OnPostAllTransfers = "Dynamsoft_OnPostAllTransfers"
pluginspage = "DynamicWebTWAINPlugIn.msi"
style ="width:500px; height:500px;">
</embed>
ActiveX Edition: Add the following <object>
tag.
<object classid= "clsid:E61B84D6-979B-4864-91B7-B8C140B58D54" id="DWObject" CodeBase= "ImageCaptureSuite.cab#version=8,2" style ="width:500px; height:500px;">
<param name = "Manufacturer" value = "Dynamsoft Corporation"/>
<param name = "ProductName" value = "ImageCapture Suite"/>
</object>
Insert the following <object>
tag to access and verify the license
info.
<object classid= "clsid:5220cb21-c88d-11cf-b347-00aa00a28331" style = "display:none;">
<param name= "LPKPath" value= "ImageCaptureSuite.lpk"/>
<object>
2. Capture Images.
After
initializing ImageCapture Suite, we can call the methods and properties of the
SDK.
if (DW_DWTSourceContainerID == "")
DWObject.SelectSource();
else
DWObject.SelectSourceByIndex(document.getElementById(DW_DWTSourceContainerID).selectedIndex);
DWObject.CloseSource();
DWObject.OpenSource();
First, we can use SelectSource()
or SelectSourceByIndex()
to both get and select the available sources on the computer.
The supported sources include the scanner and webcam drivers.
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 + "
");
}
else
{
DWObject.IfShowUI = document.getElementById("ShowUIForWebcam").checked;
DWObject.SelectMediaTypeByIndex(document.getElementById("MediaType").selectedIndex);
DWObject.SelectResolutionForCamByIndex(document.getElementById("ResolutionWebcam").selectedIndex);
AppendMessage("MediaType: " + DWObject.MediaType + "
Resolution: " + DWObject.ResolutionForCam + "
");
}
After getting the source selected, we can set the image’s properties,
such as resolution, pixel type and more. Before scanning, iTwainType
is used to check the type of the selected
source. Different properties can be set based upon the device’s type (scanner
or webcam).
Acquire images from the selected source.
DWObject.IfDisableSourceAfterAcquire = true;
DWObject.AcquireImage();
3. Upload
the captured images to your database.
Specify the server information, including the server name,
port number and whether SSL is being used.
strHTTPServer = DW_ServerName;
DWObject.HTTPPort = DW_strPort;
We
can choose the image format and then upload the
captured images to the database. Supported image formats include BMP, PNG,
JPEG, TIFF and PDF. In the given sample, you can select the image format on the
web page.
var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII
var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
strActionPage = CurrentPath + DW_ActionPage; //the ActionPage
var uploadfilename = txt_fileName.value + "." + document.getElementsByName("ImageType").item(i).value;
if (strImageType == 2 && document.getElementById("MultiPageTIFF").checked) {
if ((DWObject.SelectedImagesCount == 1) || (DWObject.SelectedImagesCount == DWObject.HowManyImagesInBuffer)) {
DWObject.HTTPUploadAllThroughPostAsMultiPageTIFF(
strHTTPServer,
strActionPage,
uploadfilename
);
}
else {
DWObject.HTTPUploadThroughPostAsMultiPageTIFF(
strHTTPServer,
strActionPage,
uploadfilename
);
}
}
else if (strImageType == 4 && document.getElementById("MultiPagePDF").checked) {
if ((DWObject.SelectedImagesCount == 1) || (DWObject.SelectedImagesCount == DWObject.HowManyImagesInBuffer)) {
DWObject.HTTPUploadAllThroughPostAsPDF(
strHTTPServer,
strActionPage,
uploadfilename
);
}
else {
DWObject.HTTPUploadThroughPostAsMultiPagePDF(
strHTTPServer,
strActionPage,
uploadfilename
);
}
}
else {
DWObject.HTTPUploadThroughPostEx(
strHTTPServer,
DWObject.CurrentImageIndexInBuffer,
strActionPage,
uploadfilename,
strImageType
);
}
DW_TempStr = DW_TempStr +"Upload: " ;
if (DW_CheckErrorString()) {
if(strActionPage.indexOf("SaveToFile")!=-1)
alert(DWObject.ErrorString)//if save to file.
else
window.location = redirectURLifOK;
}
The
action page (SaveToFile.aspx) is used to receive the image data and send the
data to the web server or database. We will use web server as an example here.
<%@ Page Language="C#" %>
<%
try
{
String strImageName;
HttpFileCollection files = HttpContext.Current.Request.Files;
HttpPostedFile uploadfile = files["RemoteFile"];
strImageName = uploadfile.FileName;
uploadfile.SaveAs(Server.MapPath(".") + "\\UploadedImages\\" + strImageName);
}
catch
{
}
%>
Download
the Sample
The
complete sample code can be downloaded from this article. If you want to check
out the features first, an online demo is provided.
ImageCapture
Suite Online Demo
To
customize the sample code, you can download the SDK first from Dynamsoft’s
website.
ImageCapture
Suite 30-Day Free Trial Download
One
of ImageCapture Suite’s beautiful features is its
convenient integration with the Barcode Reader and OCR add-ons. Check out the
demo below if you are interested in them.
Barcode
Reader & OCR Demo
If
you have any questions, please feel free to contact our support team at
support@dynamsoft.com.