How to Capture, Edit and Upload Images Through Your Web Browser

• Download source - 388.7 KB

Introduction

Dynamsoft is the leading provider of version control solutions and TWAIN SDKs. Its web scanning SDK – Dynamic Web TWAIN allows you to add the online document scanning and uploading functions to your document processing solutions with a few lines of code.

As a client-side web browser plug-in, Dynamic Web TWAIN provides developers the ability to scan images from any TWAIN compliant devices including scanners, digital cameras, webcams, etc. Once you get the images scanned/captured, you can edit and upload them to your file system, web servers, local disk or FTP and databases. All these operations can be done through web browsers including 32-bit & 64-bit IE, Firefox, Chrome, Safari and Opera.

In this article, I’ll introduce you to the key features of Dynamic Web TWAIN and provide you the sample code to help you implement the scanning function into your web application. If you’d like to try it out by yourself, a 30-day free trial is available for your evaluation.

Key Features

• Compatible with 32-bit & 64-bit IE, Firefox, Chrome, Safari and Opera.
• Support for Windows (32-bit & 64-bit) and Mac OS.
  
• Scan images from any scanner, digital camera or other TWAIN compliant devices.
• Load and save images in formats including BMP, JPEG, PNG, TIFF and PDF. Multi-page TIFF and PDF are supported as well.


• Support for ADF, Duplex, image preview and white page detection.
• Adjust image properties before scanning: brightness, contrast, pixel type, resolution, etc.
• Edit scanned images: Rotate, Crop, Mirror, Erase, Image Resizing, Zoom, etc.
  
• Save scanned images to your local disk.
• Upload & Download images to your web servers, FTP sites and databases.
• Support for image compression to reduce the image size before uploading.
  
• Digitally signed by VeriSign.
• Support for SSL to secure the image data transmission.
• Support for Windows Authentication, Forms Authentication and Basic Authentication.
• Compatible with Data Execution Prevention (DEP) and Protected Mode.

The following add-ons are available to further expand the functions of your document management solution:

Dynamsoft OCR SDK:
The add-on can be used to convert scanned images to searchable PDF files.

Dynamsoft Barcode Reader SDK:
The add-on detects and read 1-D & 2-D barcode symbols on scanned documents.

Sample Codes

Instead of spending a lot of time to learn TWAIN, you can implement all of the above functions with just a few lines using Dynamic Web TWAIN. Supported programming languages include JavaScript, ASP.NET(C#), VB.NET, ASP, JSP and PHP.

Scan Images from your Scanners

function btnScan_onclick() 
{
         WebTWAIN.SelectSource();
         WebTWAIN.OpenSource();
         WebTWAIN.IfShowUI = false;
         WebTWAIN.Resolution = 300;
         WebTWAIN.IfFeederEnabled = true;    
         WebTWAIN.IfDisableSourceAfterAcquire = true;

         WebTWAIN.AcquireImage();
}

Edit the Scanned Images

function btnShowImageEditor_onclick()
{
    WebTWAIN.ShowImageEditor();//show the user interface of Image Editor
}

function btnRotateRight_onclick() 
{
   //rotate the image by 90 degrees clockwise
   WebTWAIN.RotateRight(WebTWAIN.CurrentImageIndexInBuffer); 
}

//remove an image

function btnRemoveCurrentImage_onclick() {
    if (!CheckIfImagesInBuffer()) {
        return;
    }
    WebTWAIN.RemoveAllSelectedImages();
    if (WebTWAIN.HowManyImagesInBuffer == 0) {
        TotalImage.value = WebTWAIN.HowManyImagesInBuffer;
        CurrentImage.value = "";
        return;
    }
    else {
        UpdatePageInfo();
    }
}

//remove all images in buffer

function btnRemoveAllImages_onclick() {
    if (!CheckIfImagesInBuffer()) {
        return;
    }
    WebTWAIN.RemoveAllImages();
    TotalImage.value = "0";
    CurrentImage.value = "";
}

Upload Images to Your Web Server

Besides the web server, the TWAIN SDK also allows you upload the images to your database(s) including SQL Server and Oracle. You can modify the SaveToFile.aspx file to suit your needs.

function btnUpload_onclick() 
{
         var strActionPage;
         var strHostIP;
         var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII 
            var CurrentPath = CurrentPathName.substring(0,  CurrentPathName.lastIndexOf("/") + 1); 
         strActionPage = CurrentPath + "SaveToFile.aspx"; //the ActionPage's file path
            strHostIP = "localhost"; //The host's IP or name 
            WebTWAIN.HTTPPort = 80; 
         WebTWAIN.HTTPUploadThroughPost(strHostIP,0,strActionPage,"imageData.tif");
            if (WebTWAIN.ErrorCode != 0)
                 alert(WebTWAIN.ErrorString);
            else //succeded
                        alert("Image Uploaded successfully");
}

//SaveToFile.aspx
<%@ Page Language="c#" AutoEventWireup="false" Debug="True"%>

<%
        HttpFileCollection files = HttpContext.Current.Request.Files;
        HttpPostedFile uploadfile = files["RemoteFile"];
        uploadfile.SaveAs(System.Web.HttpContext.Current.Request.MapPath(".")
+ "/" + uploadfile.FileName);
%>

Deployment

After you create the web pages, you can deploy the application to your web server, such as IIS, Apache, Lotus Domino, etc.

1. Generate the LPK file, and add it to your web server together with the CAB file and the web pages.
2. Insert the <object> tags to your source code, and make sure the classid matches the version you are using.

Initialize the control (trial version):

<object classid="clsid:FFC6F181-A5CF-4ec4-A441-093D7134FBF2" 
    id="DynamicWebTwain1" width="143" height="156" 
    CodeBase = "DynamicWebTWAIN.cab#version=8,0">
</object>

For the license information:

<object classid = "clsid:5220cb21-c88d-11cf-b347-00aa00a28331" VIEWASTEXT>
<param name="LPKPath" value="DynamicWebTwain.lpk" />
</object>

Now the end users can access the web page and do document scanning from their web browsers.

Download the Sample

To try out the above mentioned features by yourself, you can download the samples at:
Dynamic Web TWAIN Samples

If you’d like to evaluate Dynamic Web TWAIN, you can download the free trial here:
Dynamic Web TWAIN 30-day Free Trial

If you have any questions, you can contact our support team at twainsupport@dynamsoft.com.