Click here to Skip to main content
12,457,486 members (55,270 online)
Click here to Skip to main content
Add your own
alternative version

Stats

7.8K views
215 downloads
2 bookmarked
Posted

Upload Scanned Images Multithreaded & Async in JS

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

Editorial Note

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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Dynamsoft
Canada Canada
Dynamsoft has more than 10 years of experience in TWAIN SDKs, imaging SDKs and version control solutions.

Our products include:

TWAIN SDK
- Dynamic Web TWAIN: a TWAIN scanning SDK optimized for web document management applications.
- Dynamic .NET TWAIN: a .NET TWAIN and Directshow Image Capture SDK for WinForms/WPF applications.

Imaging SDKs
- Barcode Reader for Windows, Linux, macOS, iOS, Android and Raspberry Pi.
- OCR addon for both web and .NET TWAIN SDKs

Version Control
- SourceAnywhere: a SQL server-based source control solution. Both on-premise and hosting options are provided.
Group type: Organisation

17 members


You may also be interested in...

Pro
Pro

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160826.1 | Last Updated 15 Mar 2013
Article Copyright 2013 by Dynamsoft
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid