Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Upload Scanned Images Multithreaded & Async in JS

15 Mar 2013 1  
The article will show you how to increase the efficiency of image uploading/downloading by embedding ImageCapture Suite.

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here