Click here to Skip to main content
15,861,125 members
Articles / Programming Languages / PHP

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

1 Aug 2012CPOL3 min read 58.8K   3.3K   18   4
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.

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

C#
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

C#
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.

C#
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.

License

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


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

Our products include:

TWAIN SDK
- 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.

http://www.dynamsoft.com/
This is a Organisation

21 members

Comments and Discussions

 
QuestionDynamSoft License Pin
Member 106069438-Nov-18 1:21
Member 106069438-Nov-18 1:21 
AnswerRe: DynamSoft License Pin
Member 98904738-Apr-19 19:47
Member 98904738-Apr-19 19:47 
QuestionAjax Calender overlap over Jquery Dropdownlist ,how to solve ?? Pin
ShortProgrammer22-Oct-13 2:56
ShortProgrammer22-Oct-13 2:56 
GeneralMy vote of 5 Pin
ChloeHahn5-Aug-12 21:49
ChloeHahn5-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.