Click here to Skip to main content
15,353,759 members
Articles / Product Showcase
Posted 23 May 2013



Develop a Cross-Platform Document Imaging Web App

23 May 2013CPOL3 min read
The article will show you how to develop a cross-platform document imaging solution that works with all mainstream browsers by using 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.


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.


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 = "";
    // Set the Explorer Type
    if (ua.indexOf("msie") != -1)
        DW_InIE = true;
        DW_InIE = false;
    // Set the Operating System Type
    if (ua.indexOf("macintosh") != -1)
        DW_InWindows = false;
        DW_InWindows = true;
    // Set the x86 and x64 type
    if (ua.indexOf("win64") != -1 && ua.indexOf("x64") != -1)
        DW_InWindowsX86 = false;
        DW_InWindowsX86 = true;

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

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 + "' ";
            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>";
            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
    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;
            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.IfShowUI = document.getElementById("ShowUIForWebcam").checked;
        if (DW_InWindows) {
//some webcam features only for Windows currently

    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


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

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

Our products include:

- 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

21 members

Comments and Discussions

-- There are no messages in this forum --