Click here to Skip to main content
15,353,757 members
Articles / Programming Languages / PHP
Posted 1 Aug 2012


18 bookmarked

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

1 Aug 2012CPOL3 min read
In this article, I’ll show you how to capture images from your web browser, edit them, and then upload them to your system.

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.


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.IfShowUI = false;
         WebTWAIN.Resolution = 300;
         WebTWAIN.IfFeederEnabled = true;    
         WebTWAIN.IfDisableSourceAfterAcquire = true;


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

//remove an image

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

//remove all images in buffer

function btnRemoveAllImages_onclick() {
    if (!CheckIfImagesInBuffer()) {
    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; 
            if (WebTWAIN.ErrorCode != 0)
            else //succeded
                        alert("Image Uploaded successfully");

<%@ Page Language="c#" AutoEventWireup="false" Debug="True"%>

        HttpFileCollection files = HttpContext.Current.Request.Files;
        HttpPostedFile uploadfile = files["RemoteFile"];
+ "/" + uploadfile.FileName);


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 = ",0">

For the license information:

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

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


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

QuestionDynamSoft License Pin
Member 106069438-Nov-18 1:21
MemberMember 106069438-Nov-18 1:21 
AnswerRe: DynamSoft License Pin
Member 98904738-Apr-19 19:47
MemberMember 98904738-Apr-19 19:47 
QuestionAjax Calender overlap over Jquery Dropdownlist ,how to solve ?? Pin
ShortProgrammer22-Oct-13 2:56
MemberShortProgrammer22-Oct-13 2:56 
GeneralMy vote of 5 Pin
ChloeHahn5-Aug-12 21:49
MemberChloeHahn5-Aug-12 21:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.