Upload Scanned Images Multithreaded & Async in JS
The article will show you how to increase the efficiency of image uploading/downloading by embedding ImageCapture Suite.
Introduction
The performance of image/document uploading and downloading heavily depends on the network quality, as well as the scanned image size, the CPU and memory usage situation of the client machine. However, performance and security are always two important factors to measure whether it’s a good document management system.
The article will show you how to increase the efficiency of image uploading/downloading by embedding ImageCapture Suite.
Background
Dynamsoft ImageCapture Suite is an image acquisition and processing SDK optimized for web applications. It allows you to capture images from scanners, webcams and other TWAIN/UVC/WIA compatible devices. 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.
-
Edit
scanned 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.
- Efficient image uploading & downloading: support multi-thread and asynchrony.
-
Enhanced
security: support 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).
Scan Images
ImageCapture Suite allows you to capture images from
scanners, webcams and other imaging devices compatible with TWAIN, WIA or UVC.
The whole image scanning process is customizable by hard coding the scanning
properties, or you can set IfShowUI to true to activate
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();
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 />");
DWObject.IfDisableSourceAfterAcquire = true;
DWObject.AcquireImage();
}
Enable Multi-thread for Image Uploading
You can call the MaxInternetTransferThreads Property to set how many threads to be used for the image uploading through HTTP(s) POST.
Enabling multi-thread is pretty useful when the size of the target image is relatively large, for instance > 1MB. For your reference purpose, I paste the table below, which reflects how multi-thread helps speed up the performance of image uploading. The data is provided by the test team from Dynamsoft.
| Tested File Name | File Size | Threads = 5 | Threads = 1 | Improve |
| WebTK2.tif | 219 KB | 3550.67 ms | 3113.83 ms | -14.03% |
| WebTK.tif | 537 KB | 7173.17 ms | 7249.00 ms | 1.05% |
| DWTUp1M.tif | 1.57 MB | 14712.20 ms | 21581.00 ms | 31.83% |
| Dynamic Web TWAIN 8.0.1 Trial.exe | 10.1 MB | 91461.20 ms | 128403.40 ms | 28.77% |
| Install2.zip | 20.0 MB | 178861.20 ms | 258035.60 ms | 30.68% |
Since it takes time for the algorithm to allot resources, as you can see from the above table, it’s not a good idea to use multi-thread to deal with small images (< 1 MB).
Besides the file size, it’s better to use 1 thread when the following situations apply:
- Poor network between the client and the server;
- The client machine doesn’t have sufficient memory/CPU.
Enable Asynchrony
By enabling asynchrony for your application, you can do other operations, for instance, scanning more documents, during the process of image uploading/downloading.
To active the mode, you can set the AsyncMode property
to true.
function btnUpload_onclick() {
if (!DW_CheckIfImagesInBuffer()) {
return;
}
var DW_ActionPage = "SaveToFile.aspx";
var i, strHTTPServer, strActionPage, strImageType;
if (document.getElementById("txt_ExtraInfo")) {
DWObject.ClearAllHTTPFormField();
DWObject.SetHTTPFormField("ExtraInfo", document.getElementById("txt_ExtraInfo").value);
}
txt_fileName.className = "";
DWObject.AsyncMode = true;
DWObject.MaxInternetTransferThreads = 5;
DWObject.AllowPluginAuthentication = false;
strHTTPServer = DW_ServerName;
DWObject.HTTPPort = DW_strPort;
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's file path
for (i = 0; i < 4; i++) {
if (document.getElementsByName("ImageType").item(i).checked == true) {
strImageType = i + 1;
break;
}
}
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 + "<b>Upload: </b>";
if (DW_CheckErrorString()) {
}
}
SaveToFile.aspx.cs: The action page is used to receive and transfer the image data to your web server.
using System;
using System.IO;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class SaveToFile : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
String strExc = "";
try
{
HttpFileCollection files = HttpContext.Current.Request.Files;
HttpPostedFile uploadfile = files["RemoteFile"];
String ExtraInfo = HttpContext.Current.Request.Form["ExtraInfo"];
if (ExtraInfo != "")
{
String extraInfoPath = HttpContext.Current.Request.MapPath(".") + "/" + "extraInfo.txt";
StreamWriter sw = File.CreateText(extraInfoPath);
if (extraInfoPath != null)
{
sw.Write(ExtraInfo);
sw.Close();
}
}
String Path = System.Web.HttpContext.Current.Request.MapPath(".") + "/ImageScanned/";
if (!Directory.Exists(Path))
{
Directory.CreateDirectory(Path);
}
uploadfile.SaveAs(Path + uploadfile.FileName);
}
catch (Exception exc)
{
strExc = exc.ToString();
String strField1Path = HttpContext.Current.Request.MapPath(".") + "/" + "log.txt";
StreamWriter sw1 = File.CreateText(strField1Path);
if (strField1Path != null)
{
sw1.Write(strExc);
sw1.Close();
}
Response.Write(strExc);
}
}
}
Resources
The complete source code can be downloaded from the article. The basic functions, such as image scanning and uploading asynchronously in multi-thread, are included in the source code.
To run the sample application with a trial license or customize
the web application and add more features, such as image editing, barcode
recognition and OCR, you can download ImageCapture Suite from Dynamsoft’s
website.
ImageCapture
Suite 30-Day Free Trial Download
The
online demo is also available for your reference.
ImageCapture
Suite Online Demo