Develop a Cross-Platform Document Imaging Web App

• Download sample - 4.4 MB
• ImageCapture Suite 30-Day Free Trial Download

Introduction

Document management is a big challenge nowadays, especially for paper-heavy industries like healthcare, financial, government etc. You may want to develop a document imaging application which allows users, either using Windows or Mac OS, to easily scan documents or capture images via browsers, so that you can manage the documents/records more efficiently.

The article will show you how to develop a cross-platform document imaging solution that works with all mainstream browsers by using ImageCapture Suite.

Background

Dynamsoft’s ImageCapture Suite is a browser-based document imaging library. It allows you to capture images from scanners, webcams and other TWAIN/UVC/WIA compatible devices on Windows or Mac. 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 on Windows and Mac.
• Edit 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.
• Enhanced security: supports 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).

Using the Code

Cross platform & cross browser support

ImageCapture Suite comes with 3 editions for different users:

ActiveX Edition – works with 32-bit or 64-bit Internet Explorer
Plugin Edition – works with Chrome, Firefox, Safari, Opera on Windows
Mac Edition – works with Chrome, Firefox, Safari, Opera on Mac

To make your web application work with all the mainstream browsers on Windows or Mac, you can detect the OS and browser type in JavaScript and load the corresponding edition of ImageCapture Suite.

function DW_PageonloadInner() {
    // Get User Agent Value
    ua = (navigator.userAgent.toLowerCase());
    if (ua.indexOf("wow64") == -1) {
        var samplesource32bitCtr = document.getElementById("samplesource32bit");
        if (samplesource32bitCtr)
            samplesource32bitCtr.href = "http://www.dynamsoft.com/demo/DWT/Sources/twainkit.exe";
    }
    // Set the Explorer Type
    if (ua.indexOf("msie") != -1)
        DW_InIE = true;
    else
        DW_InIE = false;
    // Set the Operating System Type
    if (ua.indexOf("macintosh") != -1)
        DW_InWindows = false;
    else
        DW_InWindows = true;
    // Set the x86 and x64 type
    if (ua.indexOf("win64") != -1 && ua.indexOf("x64") != -1)
        DW_InWindowsX86 = false;
    else
        DW_InWindowsX86 = true;


    var varShowDetail = document.getElementById("showDetail");
    if (varShowDetail && DW_InIE == true) {
        varShowDetail.style.display = "";
    }
    InitMenum();
}

function DW_CreateControl(bNeebBack) {
    var objString = "";
    var DWTContainer;

    // For IE, render the ActiveX Object
    if (DW_InIE) {
        objString = "<object id='" + DW_ObjectName + "' style='width:" + DW_Width + "px;height:" + DW_Height + "px'";

        if (DW_InWindowsX86)
            objString += "codebase='" + DW_CABX86Path + "#version=" + DW_VersionCode + "' ";
        else
            objString += "codebase='" + DW_CABX64Path + "#version=" + DW_VersionCode + "' ";

        var temp = DW_IsTrial ? DW_TRAILCLASSID : DW_FULLCLASSID;
        objString += " classid='clsid:" + temp + "' viewastext>";
        objString += " <param name='Manufacturer' value='DynamSoft Corporation' />";
        objString += " <param name='ProductFamily' value='" + DW_ProductName + "' />";
        objString += " <param name='ProductName' value='" + DW_ProductName + "' />";
        //objString += " <param name='wmode' value='transparent'/>  ";
        objString += " </object>";
    }   
    // For non-IE, render the embed object
    else {
        objString = " <embed id='" + DW_ObjectName + "'style='display: inline; width:" + DW_Width + "px;height:" + DW_Height + "px' id='" + DW_ObjectName + "' type='" + DW_MIMETYPE + "'";
        objString += " OnPostTransfer='Dynamsoft_OnPostTransfer' OnPostAllTransfers='Dynamsoft_OnPostAllTransfers'";
        objString += " OnMouseClick='Dynamsoft_OnMouseClick'  OnPostLoad='Dynamsoft_OnPostLoadfunction'";
        objString += " OnImageAreaSelected = 'Dynamsoft_OnImageAreaSelected'";
        objString += " OnImageAreaDeSelected = 'Dynamsoft_OnImageAreaDeselected'";
        objString += " OnMouseDoubleClick = 'Dynamsoft_OnMouseDoubleClick'";
        objString += " OnMouseRightClick = 'Dynamsoft_OnMouseRightClick'";
        objString += " OnTopImageInTheViewChanged = 'Dynamsoft_OnTopImageInTheViewChanged'";
        objString += " OnGetFilePath='Dynamsoft_OnGetFilePath'";
        if (DW_InWindows)
            objString += " pluginspage='" + DW_MSIPath + "'></embed>";
        else
            objString += " pluginspage='" + DW_PKGPath + "'></embed>";
    }  

    DWTContainer = document.getElementById(DW_DWTContainerID);
    DWTContainer.innerHTML = objString;
    DWObject = document.getElementById(DW_ObjectName);
}

Acquire Images from scanners or webcams

In relative terms, TWAIN and Webcam protocols are both special areas which would cost a lot of time to become familiar with. It might take months to code your application from scratch.

However, with ImageCapture Suite, you would be able to complete the document scanning or image capture coding in hours.

You can customize the scanning properties, such as Resolution, pixel type, Brightness, Contrast etc. in your code. You can also set the scanning settings by showing the user interface of the source.

function AcquireImageInner(){
    if (DW_DWTSourceContainerID == "")
        DWObject.SelectSource(); //show the available imaging devices
    else
        DWObject.SelectSourceByIndex(document.getElementById(DW_DWTSourceContainerID).selectedIndex);
    DWObject.CloseSource();
    DWObject.OpenSource();
    var iSelectedIndex = document.getElementById(DW_DWTSourceContainerID).selectedIndex;
    var iTwainType = DWObject.GetSourceType(iSelectedIndex); //check the device type, TWAIN devices or webcam
   
    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 + "<br />");
    }
    else
    {
        DWObject.IfShowUI = document.getElementById("ShowUIForWebcam").checked;
       
        if (DW_InWindows) {
//some webcam features only for Windows currently
        DWObject.SelectMediaTypeByIndex(document.getElementById("MediaType").selectedIndex);
        DWObject.SelectResolutionForCamByIndex(document.getElementById("ResolutionWebcam").selectedIndex);

    }
    DWObject.IfDisableSourceAfterAcquire = true;
    DWObject.AcquireImage(); //acquire image from the device
}

Run or deploy the application on web server

The complete source code can be downloaded from the article. The sample includes features, such as capture images from scanner or webcam, edit and save the images to local disk.

To run the sample application with a valid trial license or customize the web application, you can download ImageCapture Suite from Dynamsoft’s website.
ImageCapture Suite 30-Day Free Trial Download

To test the document imaging features from different client machines, you can simply copy the sample code to your web server (IIS, Apache or Tomcat). Users will only need to download and install the ActiveX/Plugin in the browser on the first visit of the web page. More details

The online demo is also available for your reference.
ImageCapture Suite Online Demo