Web Imaging Toolkit 1.5

Learn how to use

To use the toolkit, you are required for some basic knowledge of HTML and JavaScript. To quickly build an application, the sample html page in the downloadable ZIP is a good reference. The ZIP file consists of an ActiveX cab file, JavaScript files, a sample HTML page which helps you creating your own page.


Step 1. Create your document scan page, insert the following code between <head> and </head> to include the JavaScript library and interface language strings. By replacing the strings in file "en.js", you may change the interface into your language.

  <head>
    ...
    <script type="text/javascript" src="your path/tvs.js"></script>
    <link rel="stylesheet" type="text/css" href="your path/tvs.css"/>
    <script type="text/javascript" src="your path/languages/en.js"></script>
    ...
  </head>

Step 2. Insert a div tag at a place as the container of the web imaging component. Specify the width, the height, the border and other visual effects of the component with css.

    <div id="sample" style="width: 690px; height: 530px; border:1px solid #cdc;"></div>

and insert an ActiveX object in the html page. We suggest you place the object in bottom of the page, right ahead of tag "</body>".

    <object id="twain"
	classid="clsid:AA6D4A46-1DF1-11D4-A19E-0000E86C0B81"
	width="0" height="0"
	codebase="your path/DigiScan.cab#Version=-1,-1,-1,-1"
    </object>
  </body>

Step 3. Write JavaScript codes to initialize the component in the event of document loading.

  <script>
    var imgviewer;
    function onload()
    {
       //the first parameter is the id of div container in Step 2. 
       //the second parameter is the id of ActiveX object in Step 2. 
       //the third parameter is the license key you get from the vendor. 
       imgviewer = WebImagingToolkit.Initialize('sample', 'twain', 'license key');
    }
    ...
  </script>
  <body onload="onload();">

Step 4. The above three steps are enough to show the component and scan the document. The last step is to write your own code to upload the scanned. Depending on your specific application, you may add some document attributes while uploading the files.

  function upload()
  {
	var f;
  //before every upload action, you will need to call PreparePost() to initialize
	imgviewer.PreparePost();
  //you may add some document attributes while posting the scanned files.
	imgviewer.AddPostArg('field name', 'field value');
	imgviewer.AddPostArg('field name', 'field value');
	imgviewer.AddPostArg('field name', 'field value');

  //upload the scanned files.
  //The first parameter is the url to post the files. 
  //It must be a full length url and start from http:// or https://
  //The second parameter is the filename with extension. e.g. ABC###.jpg
	imgviewer.Upload('your post url', 'filename', false)
  }

Below is a sample code in ASP.NET to demostrate how to accept files uploaded from browser.



<%@ Page Language="VB" %>
<script runat="server">
	Private Sub Page_Load(ByVal sender As System.Object, 
	                      ByVal e As System.EventArgs) _
		Handles MyBase.Load
		Dim count, i as Integer
		Dim v as HttpPostedFile

		// filecount is a form field to indicate how many files are posted
		Count = Request.Form("filecount")
		For i=0 to Val(count)-1
		//iterate form field from "file0", "file1", ..., "file[n]"
			v = Request.Files("file" & Int(i))
			If( v.FileName <> "" ) then
			   v.SaveAs("c:\uploads\" & ExtractFileName(v.FileName))
			End If
		Next
	End Sub

	Private Function ExtractFileName(WithPath As String)
		Dim sWithoutPath As String
		Dim iLen As Integer
		Dim iWhere As Integer
		
		sWithoutPath = WithPath
		Do Until InStr(sWithoutPath, "\") = 0
			iLen = Len(sWithoutPath)
			iWhere = InStr(sWithoutPath, "\")
			sWithoutPath = Right(sWithoutPath, iLen - iWhere)
		Loop
		ExtractFileName = sWithoutPath
	End Function
</script>

and PHP script here


<?php
	$dir = "c:/uploads/"; 
// filecount is a form field to indicate how many files are posted
	for($index=0; $index<$_REQUEST["filecount"]; $index++)
	{
	  $tagName = "file" . $index;
// iterate form field from "file0", "file1", ..., "file[n]"
	  move_uploaded_file($_FILES[$tagName]["tmp_name"], 
	                     $path . $_FILES[$tagName]["name"]);
	}
?>

Congratulation. Now, your web application is able to scan and ready to accept document uploading.