Upload Scanned Images Multithreaded & Async in JS

• Download Source Code - 1.6 MB
• ImageCapture Suite 30-Day Free Trial Download

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.

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