How to scan document in zul using TWAIN

 Download sample provided by Dyansoft here


<zk xmlns:x="xhtml" xmlns:zk="zk" >

<window   title="scan" closable="true" width="600px" height="400px" mode="modal" popup="true" border="normal" apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('com.csdcsystems.amanda.jems.web.viewmodel.ScanToInsertAttachmentViewModel')" >

 <script type="text/javascript">

            <![CDATA[

            var DWObject;
            var seed;
            function pageonload() {
                     seed = setInterval(initControl, 500);//Wait 500ms after opening the webpage, call “ControlDetect” function
            }
           
            function initControl() {
                if (DWObject) {
                    //alert("init");
                    if (DWObject.ErrorCode == 0) {
                        clearInterval(seed);
                        DWObject.BrokerProcessType = 1;
                    }
                    //alert("init"+DWObject.SourceCount);
                    for (var i = 0; i < DWObject.SourceCount; i++) {
                       
                        document.getElementById("deviceSetup").options.add(new
                        Option(DWObject.SourceNameItems(i),
                                DWObject.SourceNameItems(i)));
                       
                    }
                    DWObject.attachEvent('onTopImageInTheViewChanged', Dynamsoft_OnTopImageInTheViewChanged);
                    DWObject.attachEvent('onPostAllTransfers', Dynamsoft_OnPostAllTransfers);
                   
                }
            }

            function acquireImage() {
                if (DWObject) {
                    if (DWObject.SourceCount > 0) {
                        DWObject.SelectSourceByIndex(document.getElementById("deviceSetup").selectedIndex);
                        DWObject.CloseSource();
                        DWObject.OpenSource();
                        DWObject.IfShowUI = document.getElementById("ShowUI").checked;
                        DWObject.Resolution = document.getElementById("resolution").value;
                        DWObject.IfFeederEnabled = document.getElementById("ADF").checked;
                        DWObject.IfDuplexEnabled = document.getElementById("Duplex").checked;
                        DWObject.IfDisableSourceAfterAcquire = true;
                        DWObject.AcquireImage();
                      
                   
                    }
                    else
                        alert("No TWAIN compatible drivers detected.");
                }
            }

            function Dynamsoft_OnTopImageInTheViewChanged(index) {
                if (DWObject) {
                    DWObject.CurrentImageIndexInBuffer = index;
                }
            }
            function Dynamsoft_OnPostAllTransfers() {
                btnUpload();
            }

            function btnUpload() {
                    var pageUrl=document.getElementById("hdnActionPageUrl").value;
                      var strActionPage;
                    var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII
                    var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
                    strActionPage = CurrentPath + pageUrl; //the ActionPage's file path
                    strHTTPServer = location.hostname;
                    DWObject.HTTPPort = location.port==""?80:location.port;
                    DWObject.HTTPUploadThroughPost(strHTTPServer,0,strActionPage,"imageData.jpg");

                    if (DWObject.ErrorCode != 0)
                        alert(DWObject.ErrorString);
                    else //succeded
                        alert("Image Uploaded successfully");
               
            }   

            zk.afterMount(function() {
                var    ua=navigator.userAgent;
                var IE=false;
                var IE64=false;
                if(ua.indexOf('msie') != -1 || ua.indexOf('trident') != -1 ||ua.indexOf('MSIE') != -1 ){
                    IE=true;
                }
                if(ua.indexOf('win64') != -1 || ua.indexOf('x64') != -1){
                    IE64=true;
                }
                if(IE){
                    if(IE64){
                        //alert("IE64");
                        DWObject = document.getElementById("dwtcontrolContainer_ObjIE");
                    }else{
                        //alert("IE32");
                        DWObject=document.getElementById("dwtcontrolContainer_ObjIE32");
                    }
                }else{
                    //alert("None IE");
                    DWObject = document.getElementById("dwtcontrolContainer_Obj");
                }
                //DWObject = document.getElementById("dwtcontrolContainer_Obj");
                DWObject.ProductKey = "";
                DWObject.isTrial = false;
                var attLabel = $("#attachmentLabel").val();
                var attValue = $("#attachmentValue").val();
                var labelArray = attLabel.split('-');
                var valueArray = attValue.split('-');
           
                for (var i = 0; i < labelArray.length; i++) {
                    document.getElementById("attachmentType").options.add(new
                    Option(labelArray[i],
                            valueArray[i]));
                }
                pageonload();
            } );
           
            ]]>
</script>


 <hlayout>
     <separator width="10px"></separator>
     <x:table border="0" width="520px">
         <x:tr>
             <x:td colspan="2">
                 <space></space>
             </x:td>
         </x:tr>

         <x:tr>
             <x:td align="right">
                 <label value="Attachment Description"></label>
             </x:td>
             <x:td>
                 <x:select id="attachmentType" style="WIDTH: 408px" onChange="demo();">
                        </x:select>
             </x:td>
         </x:tr>
         <x:tr>
             <x:td align="right">
                 <label value="Attachment Detail"></label>
             </x:td>
             <x:td>
                 <x:input type="textbox" id="attachmentDetail"
                     style="WIDTH: 400px; HEIGHT: 42px;" value="" maxlength="4000" />
             </x:td>
         </x:tr>
     </x:table>
 </hlayout>
 <hlayout>
     <separator width="15px"></separator>
     <x:table border="0" width="520px">
         <x:tr>
             <x:td colspan="3">
                 <x:img id="idDetailTableLoadingBar"
                     src="/resource/image/loading-bar.gif" />
             </x:td>
         </x:tr>
         <x:tr>
             <x:td style="WIDTH: 130px" colspan="2">
                 <label value="Scan Mode"></label>
             </x:td>

             <x:td style="WIDTH: 180px">
                 <label value="Scan File Name"></label>
             </x:td>
         </x:tr>
         <x:tr>
             <x:td colspan="2" width="300px">

                 <x:table width="100%">
                     <x:tr>
                         <x:td width="100px">
                             <x:input type="radio" name="bwOrColour"
                                 value="B" checked="true" />
                             <label value="BW" />
                         </x:td>
                         <x:td width="100px">
                             <x:input type="radio" name="bwOrColour"
                                 value="G" />
                             <label value="Gray" />
                         </x:td>
                         <x:td width="100px">
                             <x:input type="radio" name="bwOrColour"
                                 value="C" />
                             <label value="Color" />
                         </x:td>
                     </x:tr>
                 </x:table>
             </x:td>
             <x:td width="173px">
                 <x:input type="textbox" id="FileName"
                     style="WIDTH: 190px" value="@load(vm.fileName)" />
             </x:td>
         </x:tr>
         <x:tr>
             <x:td width="85px">
                 <label value="Resolution"></label>
             </x:td>
             <x:td width="173px">
                 <x:select id="resolution" style="WIDTH: 150px">
                     <x:option value=""></x:option>
                     <x:option value="75">75</x:option>
                     <x:option value="100">100</x:option>
                     <x:option value="150">150</x:option>
                     <x:option value="200">200</x:option>
                     <x:option value="250">250</x:option>
                 </x:select>
             </x:td>
             <x:td width="173px">
                 <label value="File type"></label>
             </x:td>
         </x:tr>
         <x:tr>
             <x:td width="300px" colspan="2">
                 <x:table border="0" width="100%">
                     <x:td width="100px">
                         <x:input type="checkbox" id="ShowUI" />
                         <label value="ShowUI" />
                     </x:td>
                     <x:td width="100px">
                         <x:input type="checkbox" id="ADF" />
                         <label value="ADF" />
                     </x:td>
                     <x:td width="100px">
                         <x:input type="checkbox" id="Duplex" />
                         <label value="Duplex" />
                     </x:td>
                 </x:table>
             </x:td>
             <x:td width="173px">
                 <x:select id="FileType" style="WIDTH: 195px">
                     <x:option value="JPG">JPG</x:option>
                     <x:option value="PNG">PNG</x:option>
                     <x:option value="PDF">PDF</x:option>
                     <x:option value="TIF">TIF</x:option>
                     <x:option value="BMP">BMP</x:option>
                 </x:select>
             </x:td>
         </x:tr>
         <x:tr>
             <x:td style="WIDTH: 300px" colspan="2"></x:td>
             <x:td width="173px">
                 <label value="Device Setup"></label>
             </x:td>
         </x:tr>
         <x:tr>
             <x:td style="WIDTH: 300px" colspan="2"></x:td>
             <x:td width="173px">
                 <x:select id="deviceSetup" style="WIDTH: 195px">
                     <x:option value=""></x:option>
                 </x:select>
             </x:td>
         </x:tr>
     </x:table>
 </hlayout>

 <hlayout>
     <separator width="15px"></separator>
     <x:table border="0" width="520px">

         <space width="30px"></space>
         <x:tr>
             <x:td align="right">
                 <x:input type="textbox" id="attachmentLabel"
                     value="@load(vm.attachmentLabel)" visible="false" />

                 <x:input type="textbox" id="attachmentValue"
                     value="@load(vm.attachmentValue)" visible="false" />
                 <x:input type="textbox" id="lid" width="210px"
                     value="@bind(vm.sessionId)" visible="false" />
                 <x:input type="textbox" id="agencyType" width="210px"
                     value="@bind(vm.agencyType)" visible="false" />
                 <x:input type="textbox" id="folderRSN" width="210px"
                     value="@bind(vm.folderRSN)" visible="false" />
                 <x:input type="textbox" id="folderType" width="210px"
                     value="@bind(vm.folderType)" visible="false" />

                 <x:input type="hidden" id="hdnActionPageUrl"
                     value="@bind(vm.actionPageURL)" />

                 <x:input type="hidden" id="scanProductKey"
                     value="@bind(vm.scanProductKey)" />

                 <x:input type="button" value="Scan"
                     onClick="acquireImage();" id="btnScan" style="WIDTH: 80px">
                 </x:input>
                 <space></space>

                 <x:input type="button" value="Close" id="btnSClose"
                     style="WIDTH: 80px" onClick="@command('doCancel')">
                 </x:input>
             </x:td>
         </x:tr>

         <x:tr>
             <x:td>
                 <x:embed id='dwtcontrolContainer_Obj'
                     style='display: inline; width:0px;height:0px'
                     type='Application/DynamicWebTwain-Plugin'
                     onPostAllTransfers="Dynamsoft_OnPostAllTransfers"
                     onTopImageInTheViewChanged="Dynamsoft_OnTopImageInTheViewChanged"
                     pluginspage='/resource/scanresources/DynamicWebTWAINPlugIn.msi'>
                 </x:embed>

             </x:td>
         </x:tr>
         <x:tr>
             <x:td>
                 <x:object style="display: inline;"
                     classid="clsid:5220cb21-c88d-11cf-b347-00aa00a28331">
                     <x:param name="LPKPath"
                         value="/resource/scanresources/DynamicWebTwain.lpk">
                     </x:param>
                     </x:object>
                 <x:object style="width: 0px; height: 0px;"
                     id="dwtcontrolContainer_ObjIE"
                     codeBase="/resource/scanresources/DynamicWebTWAINx64.cab#version=9,1"
                     classid="clsid:E7DA7F8D-27AB-4EE9-8FC0-3FEC9ECFE758"
                     viewastext="">
                     <x:PARAM NAME="_cx" VALUE="2645"></x:PARAM>
                     <x:PARAM NAME="_cy" VALUE="2645"></x:PARAM>
                     <x:PARAM NAME="JpgQuality" VALUE="80"></x:PARAM>
                     <x:PARAM NAME="Manufacturer"    VALUE="DynamSoft Corporation"></x:PARAM>
                     <x:PARAM NAME="ProductFamily"    VALUE="Dynamic Web TWAIN"></x:PARAM>
                     <x:PARAM NAME="ProductName"    VALUE="Dynamic Web TWAIN"></x:PARAM>
                     <x:PARAM NAME="VersionInfo"    VALUE="9, 1, 0, 806"></x:PARAM>
                     <x:param name="ProductFamily" value="Dynamic Web TWAIN">
                </x:param>
            </x:object>
            <x:object style="width: 0px; height: 0px;"
                     id="dwtcontrolContainer_ObjIE32"
                     codeBase="/resource/scanresources/DynamicWebTWAIN.cab#version=9,1"
                     classid="clsid:E7DA7F8D-27AB-4EE9-8FC0-3FEC9ECFE758"
                     viewastext="">
                     <x:PARAM NAME="_cx" VALUE="2645"></x:PARAM>
                     <x:PARAM NAME="_cy" VALUE="2645"></x:PARAM>
                     <x:PARAM NAME="JpgQuality" VALUE="80"></x:PARAM>
                     <x:PARAM NAME="Manufacturer"    VALUE="DynamSoft Corporation"></x:PARAM>
                     <x:PARAM NAME="ProductFamily"    VALUE="Dynamic Web TWAIN"></x:PARAM>
                     <x:PARAM NAME="ProductName"    VALUE="Dynamic Web TWAIN"></x:PARAM>
                     <x:PARAM NAME="VersionInfo"    VALUE="9, 1, 0, 806"></x:PARAM>
                     <x:param name="ProductFamily" value="Dynamic Web TWAIN">
                </x:param>
            </x:object>
             </x:td>
         </x:tr>
     </x:table>
 </hlayout>

</window>

</zk>

How to scan and save image using Twain jsp

Scan.jsp

<HTML>

                <HEAD>

                                <title>Online Demo of Web Twain</title>

                                <SCRIPT language="javascript">

                                function btnScan_onclick()

                                {

                                                frmScan.DynamicWebTwain1.SelectSource();

                                                frmScan.DynamicWebTwain1.AcquireImage();

                                }

                                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.jsp"; //the ActionPage's file path

                                                strHostIP = location.hostname;

                                                frmScan.DynamicWebTwain1.HTTPPort = location.port==""?80:location.port;    

                                                frmScan.DynamicWebTwain1.HTTPUploadThroughPost(strHostIP, 0, strActionPage, "imageData.jpg");

                                               

                                                if (frmScan.DynamicWebTwain1.ErrorCode != 0) {                            //Failed to upload image

                                                                alert(frmScan.DynamicWebTwain1.ErrorString);

                                                                if (frmScan.DynamicWebTwain1.ErrorString == "HTTP process error")

                                                                                alert (frmScan.DynamicWebTwain1.HTTPPostResponseString);

                                                }

                                                else                                                                                                        //succeeded

                                                                frmScan.submit();

                                }                             

                                </SCRIPT>

                </HEAD>

                <body MS_POSITIONING="GridLayout">

                <OBJECT CLASSID = "clsid:5220cb21-c88d-11cf-b347-00aa00a28331" VIEWASTEXT>

                                <PARAM NAME="LPKPath" VALUE="DynamicWebTwain.lpk">

                </OBJECT>         

                                <form id="frmScan" action="ShowResult.html">

                                <TABLE width="100%">

                                <TR>

                                <TD>

                                <center>

                                <object classid="clsid:FFC6F181-A5CF-4EC4-A441-093D7134FBF2" id="DynamicWebTwain1" width="250" height="350"

                                                CodeBase = "DynamicWebTwain.cab#version=7,0">

                                <param name="_cx" value="847">

                                <param name="_cy" value="847">

                                <param name="JpgQuality" value="80">

                                <param name="Manufacturer" value="DynamSoft Corporation">

                                <param name="ProductFamily" value="Dynamic Web TWAIN">

                                <param name="ProductName" value="Dynamic Web TWAIN">

                                <param name="VersionInfo" value="Dynamic Web TWAIN 7.0">

                                <param name="TransferMode" value="0">

                                <param name="BorderStyle" value="0">

                                <param name="FTPUserName" value>

                                <param name="FTPPassword" value>

                                <param name="FTPPort" value="21">

                                <param name="HTTPUserName" value>

                                <param name="HTTPPassword" value>

                                <param name="HTTPPort" value="80">

                                <param name="ProxyServer" value>

                                <param name="IfDisableSourceAfterAcquire" value="0">

                                <param name="IfShowUI" value="-1">

                                <param name="IfModalUI" value="-1">

                                <param name="IfTiffMultiPage" value="0">

                                <param name="IfThrowException" value="0">

                                <param name="TIFFCompressionType" value="0">

                                <param name="IfFitWindow" value="-1">

                                </object>

                                </center>

                                </TD>

                                </TR>

                                <TR>

                                <TD>

                                <center>

                                                <input id="btnScan" style="WIDTH: 100;HEIGHT: 30" onclick="return btnScan_onclick()" type="button" value="Scan">

                                                <input style="WIDTH: 100;HEIGHT: 30" onclick="return btnUpload_onclick()" type="button" value="Upload">            

                                </center>

                                </TD>

                                </TR>

                                </TABLE>

                                </form>

                </body>

</HTML>

SaveToFile.jsp

<%@  page language="java" import="java.io.*"%>

<%!

                //find string

                int Find(byte[] src, int start, int length, String str)

                {

                                if (start < 0) return -1;

                                if (start >= src.length) return -1;

                               

                                int end = (start + length - 1);

                                if (end < 0) end = 0;

                                if (end <= start) end = start;

                               

                                int index = 0;

                                int firstMatch = -1;

                                for (int i = start; i <= end; i++)

                                {

                                                if (src[i] == str.charAt(index))

                                                {

                                                                if (firstMatch == -1)

                                                                                firstMatch = i; //save first match

                                                                index ++;

                                                }

                                                else

                                                {

                                                                index = 0; //try to find again

                                                                if (firstMatch != -1 && (firstMatch + 1)!= i)

                                                                                i = firstMatch + 1; //reset index to find

                                                                firstMatch = -1;

                                                }

                                               

                                                if (index == str.length())

                                                                return firstMatch; // found

                                }

                               

                                return -1;

                }

               

                int ReverseFind(byte[] src, int start, int length, String str)

                {

                                if (start < 0) return -1;

                                if (start >= src.length) return -1;

                               

                                int end = (start - length + 1);

                                if (end < 0) end = 0;

                                if (end >= start) end = start;

                                int index = str.length() - 1;

                                int firstMatch = -1;

                               

                                for (int i = start; i >= end; i--)

                                {

                                                if (src[i] == str.charAt(index))

                                                {

                                                                if (firstMatch == -1)

                                                                                firstMatch = i; //save first match

                                                                index --;

                                                }

                                                else

                                                {

                                                                index = str.length() - 1; //try to find again

                                                                if (firstMatch != -1 && (firstMatch - 1)!= i)

                                                                                i = firstMatch -1; // reset index to find

                                                                firstMatch = -1;

                                                }

                                               

                                                if (index < 0)

                                                                return i; //found

                                }

                               

                                return -1;

                }

%>

<%

                String contentType = request.getContentType();

                               

                if ((contentType != null) && (contentType.indexOf("multipart/form-data") >= 0))

                {

                                DataInputStream in = new DataInputStream(request.getInputStream());

                                int formDataLength = request.getContentLength();

                                byte dataBytes[] = new byte[formDataLength];

                                int byteRead = 0;

                                int totalBytesRead = 0;

                               

                                while (totalBytesRead < formDataLength)

                                {

                                                byteRead = in.read(dataBytes, totalBytesRead, formDataLength);

                                                totalBytesRead += byteRead;

                                }

                                in.close();

                               

                                int endPos = -1;

                                int startPos = -1;

                               

                                // Found boundary

                                String strEOL = "\r\n";

                                int findLength = 2048;

                                int posEOL = Find(dataBytes, 0, findLength, strEOL);

                                int posName = Find(dataBytes, posEOL, findLength, "Content-Disposition: form-data;");

                                String boundary = "";

                                if (posName != -1)

                                                boundary = new String(dataBytes, 0, posEOL);

                               

                                //Found filename

                                posEOL = Find(dataBytes, posName, findLength, strEOL);

                                int posFileNameL = ReverseFind(dataBytes, posEOL, findLength, "filename=\"");

                                String saveFile = "";

                                if (posFileNameL != -1)

                                {

                                                posFileNameL += 10; //

                                                int posFileNameR = ReverseFind(dataBytes, posEOL, findLength, "\"");

                                                saveFile = new String(dataBytes, posFileNameL, posFileNameR - posFileNameL);

                                }

                               

                                //Found content type

                                int posContentType = Find(dataBytes, posEOL, findLength, "Content-Type:");

                                if (posContentType != -1)

                                                posEOL = Find(dataBytes, posContentType, findLength, strEOL);

                                               

                                //Found EOL

                                int posOldEOL = posEOL;

                                if (posEOL != -1)

                                                posEOL += strEOL.length();

                                               

                                do

                                {

                                                posEOL = Find(dataBytes, posEOL, strEOL.length(), strEOL);

                                                if (posEOL != -1)

                                                {

                                                                posOldEOL = posEOL;

                                                                posEOL += strEOL.length();

                                                }

                                }while (posEOL != -1);

                               

                                //get start pos

                                startPos = (posOldEOL + strEOL.length());

                               

                                //Found end pos

                                int posEndBoundary = ReverseFind(dataBytes, dataBytes.length - 1, findLength, boundary);

                                if (posEndBoundary != -1)

                                {

                                                posEOL = ReverseFind(dataBytes, posEndBoundary - 1, strEOL.length(), strEOL);

                                }

                               

                                posOldEOL = posEOL;

                                if (posEOL != -1)

                                                posEOL -= 1;

                                               

                                do

                                {

                                                posEOL = ReverseFind(dataBytes, posEOL, strEOL.length(), strEOL);

                                                if (posEOL != -1)

                                                {

                                                                posOldEOL = posEOL;

                                                                posEOL -= 1;

                                                }

                                }while (posEOL != -1);

                               

                                //get end pos

                                endPos = posOldEOL;

                               

                                File fileToRecv = new File(application.getRealPath("/") + saveFile);

                                if(!fileToRecv.exists())

                                {

                                                fileToRecv.createNewFile();

                                }

                               

                                FileOutputStream fileOut = new FileOutputStream(fileToRecv);

                               

                                fileOut.write(dataBytes, startPos, (endPos - startPos));

                               

                                fileOut.flush();

                                fileOut.close();

                }

%>