Develop a Cross-Platform Document Imaging Web App

Last Updated on 2018-10-10


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.
[javascript]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 + "’ ";

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.
[javascript]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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.