Demo of TWAIN scanner or camera use with csXImage in a web browser
This demo shows how to acquire an image from a Twain source, such as a scanner or webcam, and upload it to a remote server. It runs in a web page. To run it you need to have the csXImage trial ocx control installed on your system as well as MS Internet Explorer. The server needs to be able to save an uploaded file. We have three variations of the demo, each using a different method to save the uploaded file, ASP, ASP.NET and PHP. The client side script is the same in each case.
ASP Version
To run this version you need the csXImage trial ocx control. The server side ASP script needs our csASPUpload component registered on the server. Both can be downloaded below as well as the sample scripts.
Download the trial csXImage control - csXImageTrial.exe (3.6 MB)
ASP.NET Version
To run this version you need the csXImage trial ocx control.
Download the trial csXImage control - csXImageTrial.exe (3.6 MB)
The example scripts (ASP.NET) - TwainUploadASPNET.zip (41 KB)
PHP Version
To run this version you need the csXImage trial ocx control. The server side script is PHP so your server must be able to run this. Both can be downloaded below as well as the sample scripts. PHP can save file uploads without any third party components.
The ActiveX control csXImage includes a range of functions to acquire images from TWAIN compliant devices such as scanners and webcams. It also has a function for sending an image to a remote server as an HTTP upload.
This functionality is demonstrated with this simple Javascript application. the application consists of a single web page containing an instance of csXImage and some buttons to operate it. The formatting and Javascript coding has been kept to a minimum to make it easier to understand. The buttons are enabled and disabled as the application progresses so that then can only be clicked when they have something to do.
There is a button to select the Twain device from the available installed devices. Once a valid device is selected the Scan button is enabled, which calls the Acquire method. A check is made to see if an image has been loaded and the buttons are enabled accordingly. After scanning an image may be cropped or rotated. The Crop operation uses two buttons, one to select an area and another to crop to it. Finally the image can be uploaded to a remote server using the PostImage method. This can only be used if a script or cgi is configured on the remote server to receive the upload. The parameters of the PostImage method will need to be edited before the demo will work correctly because we are unable to specify the destination URL that you will be using.
A longer description of this demo is provided in the ReadMe.txt file included with each download.
Using csXImage as a clientside control in the browser.
Saving file uploads on a server with csASPUpload.
Saving file uploads on a server with csNetUpload.
The file is uploaded as an HTTP post in the same way as using the form tag <input type="file"> and so it can be saved using a variety of methods, such as other ASP or ASP.NET controls, Cold Fusion or other server side scripts.
PostImage - The HTTP upload method in csXImage
The PostImage command can be used to upload any image contained in the csXImage control, not just a scanned image. It can be used in other programming environments, not just in a web browser, although it needs an active internet connection and the Wininet.dll file must be present (installed with Internet Explorer). PostImage can be difficult to troubleshoot if it does not work immediately. It returns a Boolean value as a status report but this only shows if the remote script returned a 200 OK message. Failure to receive a 200 message can mean anything from not having an internet connection, through having an invalid URL to a syntax error in the remote script. A 200 message does not prove that the file was uploaded and some scripting systems generate HTML error messages that describe an error but still produce a 200 OK result.
When problems are encountered the remote script should be checked using a simple HTML form, because then the results can be seen. The server logs may be used to check that the PostImage function has connected. Another common error is not setting the FormVarName parameter of PostImage. This is not needed by our csASPUpload component but some other components and PHP and Cold Fusion all use this value when extracting the file from the server.
Further debugging is possible using the PostReturnFile property which returns a text string containing the output from the server side script after uploading. This can be displayed using a Javascript alert box after calling PostImage but often a better way is to use the Javascript innerHTML property to display the server side result directly.
Add the following in the Javascript immediately after PostImage:
x=document.getElementById("returnfile");
x.innerHTML = csxi.PostReturnFile;
Add the following in the HTML body:
<div id="returnfile"></div>
Uploading with FTP - The FTPImage method
The FTPImage method allows the image in csXImage to be sent directly to an FTP server. It requires an FTP account with a username and password and these details will be visible if the user views the script. It removes the need for a server side script to save the file. For more details, refer to the csXImage instructions.
Other File Upload Products
Visit our upload products page for a summary of the client and server side components that we have for transferring files between client and server, or between two servers.
We can recommend WebTwainX as an ActiveX control with a built in user interface allowing images to be scanned and uploaded from a web application. It is published by Ciansoft.
- Client Side Example - Description of how to use csXImage in a web browser.
- Client Side Scanning with ADF - Scanning multiple images using an ADF scanner.
- Resize and Upload Example - Opening a local image, resizing and uploading to a server.
- Client Side Multi-page TIFFs - View edit or scan multi-page TIFF images.