一、基本要求
- 服务器端
1. 操作系统：Windows，Linux，UNIX，Mac 等。
2. 网络服务器：IIS，Apache，Tomcat，ColdFusion 等。
3. 编程语言：ASP，VB.NET，C#，PHP，JSP，CFM 等。
- 客户端
1. 浏览器： ActiveX 版：IE(32 位或 64 位)； Plug-in 版：Windows 系统中的 Chrome，FireFox，Safari 或 Opera； Mac 版：Mac OS X 10.5 及以上系统中的 Safari，Opera，Chrome 和 FireFox。
2. 扫描仪/相机：兼容 TWAIN。
3. 请在客户端计算机上确认 IE 浏览器中的以下安全选项被设置为“提示”或“已启用”： a) 下载已签名的 ActiveX 控件； b) 运行 ActiveX 控件和插件； c) 对标记为可安全执行脚本的 ActiveX 控件执行脚本。
二、集成步骤
- 去官网下载Dynamsoft Web Twain ，安装DynamsoftServiceSetup.exe。傻瓜式安装。网址：http://www.dynamsoft.com/Demo/DWT/online_demo_scan.aspx
- 更改密钥。一般情况下下载下来的文件中的密钥是已经过期了的。集成后就会出现这样的情况：
因此，可以直接可以跟他们的客服要试用期的密钥，也可以给他们在中国的代理公司“杭州大名软件”发邮件获取试用期的密钥。拿到新的密钥之后，打开dynamsoft.webtwain.config.js文件，替换密钥。 - 新建一个包，为了方便起见，我将OnlineDemo\Resources文件夹下的文件全部放进去。
- 创建一个在线扫描的实例。
- 引入需要的js文件：
<!--java 服务器端需要的js--> <script type="text/javascript" src="js/scan/Resources/dynamsoft.webtwain.initiate.js"> </script> <script type="text/javascript" src="js/scan/Resources/dynamsoft.webtwain.config.js"> </script> - 之后的问题就很简单，编写前端代码之后就可以了。但是很多参数可以再扫描仪的UI界面中可以设置，但是很难拿到你在扫描仪UI界面设置的参数，所以要自己在页面上设置一些你必须要用到的参数。这样就可以很容易的拿到你想要的参数。可以看到，一般常规的设置参数是都可以设置的，在这里我加了一个扫描的张数，以便在扫描的时候可实时看到扫描信息部分代码如下：
</div> <div id= "setScan" style="margin-top:20px;"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>设置</legend> <table id="setScan_table"> <tr> <td> <label style="font-size: 14px;color: red;font-weight: bold;">扫描仪:</label> </td> <td> <select size="1" id="source" style="position: relative; width: 220px;height:30px;border-color:#13b5b1;"></select> </td> </tr> <tr> <td> <label style="font-size: 14px;color: red;font-weight: bold;">送纸模式:</label> </td> <td> <input type="radio" name="radio-view" value="1" value="单页送纸" /> <label for="radio-view-a" style="color:#13b5b1;">单页送纸</label> <input type="radio" name="radio-view" value="2" value="批量送纸" checked="checked" /> <label for="radio-view-b" style="color:#13b5b1;">批量送纸</label></br> </td> </tr> <tr> <td style="padding: 10px 0px 0px 0px;"> <label style="font-size: 14px;color: red;font-weight: bold;">单双面选择:</label> </td> <td style="padding: 10px 0px 0px 0px;"> <select name="checkSid"> <option value="0">--请选择单双面--</option> <option value="1">单面</option> <option value="2">双面</option> </select> </td> </tr> <tr> <td style="padding: 10px 0px 0px 0px;"> <label>图像上传模式:</label> </td> <td style="padding: 10px 0px 0px 0px;"> <input type="radio" name="radio-checkScanModle" value="1" value="扫描时上传" /> <label for="radio-view-a" style="color:#13b5b1;">扫描时上传</label> <input type="radio" name="radio-checkScanModle" value="2" value="扫描后上传" checked="checked" /> <label for="radio-view-b" style="color:#13b5b1;">扫描后上传</label></br> </td> </tr> <tr> <td style="padding: 10px 0px 0px 0px;"> <label style="font-size: 14px;color: red;font-weight: bold;">像素设置:</label> </td> <td style="padding: 10px 0px 0px 0px;"> <select name="chosePpi" id ="chosePpi"> <option value="1">100</option> <option value="2"selected="selected">150</option> <option value="3">200</option> <option value="4">240</option> <option value="5">300</option> <option value="6">400</option> <option value="7">600</option> </select> </td> </tr> <tr> <td style="padding: 10px 10px 0px 0px;"> <div class="hover_div" onclick="AcquireImage()" alt="" title="开始扫描上传"> <img style="width:20px;height:20px;margin:5px;float: left;" src="images/scan/ks.png" /> <div style="font-size: 16px;line-height: 30px;margin-left:30px;color:white;">开始扫描</div> </div> </td> <td style="padding: 10px 0px 0px 60px;"> <div id="upload_button_img" class="hover_div" style="display:none;" onclick="uploadImgs('0')" alt=""title="上传"> <img style="width:18px;height:18px;margin:6px;float: left;" src="images/scan/tp.png" /> <div style="font-size: 16px;line-height: 30px;margin-left:30px;color:white;">图片上传</div> </div> </td> </tr> </table> <div style="float: right;margin-right:10%;margin-top: 150px;"> <table> <tr> <td><label style="font-size:24px;color:#CCCCCC;margin-top:50px;">已扫描：</label></td> <td><input type="text" size="2" id="Scan_TotalImage" readonly="readonly" value="0" /></td> <td><label >张</label></td> </tr> </table> </div> </fieldset> </div> - 接下来就是将上面代码中的函数实现了，具体流程视情况而定，可以在API中找到。另外，我收到邮件说最新版本的可以直接将图片转为blob类型，而不需要自己去写方法，具体的我没有去试。
- 注意：可以去页面查看DWObject 这个参数，很烧脑，好像有240个左右的参数，包括图片的base64码也是存在里面的，我是根据图片的下标取到的图片，取图片的方法如下：（慢慢找去吧，不花点时间真的会很懵，你要是能把dynamsoft.webtwain.initiate.js中的东西全部弄通了私信我，给我也讲讲(/偷笑)）
// 图片路径 var src=DWObject.httpUrl+"dwt/dwt_trial_"+DWObject.__versionInfo.replace(/, /g,"")+"/img?id="+DWObject.clientId+"&index="+index; - 扫描图片的时候可以将页面上设置的参数拿到然后进行设置，可以在API中找到，部分如下
// 是否显示扫描仪自带的UI界面，true显示，false不显示 DWObject.IfShowUI = true; // 扫描单双面设置true为双面，否则为双面 DWObject.IfDuplexEnabled = false; // 设置扫描仪自动边界检测 DWObject.IfAutomaticBorderDetection = true // 自动亮度 DWObject.IfAutoBright = true; // 自动歪斜矫正 DWObject.IfAutomaticDeskew = true; // 设置扫描完成之后自动关闭扫描设备 DWObject.IfDisableSourceAfterAcquire = true; - 至于图片是存在本地还是存在其他地方得按需求做，具体的代码不展示，另外要注意的是，如果不断用ajax请求图片的ID，图片储存的又比较慢，ajax设置 async: false是卡不住的，我是按照最原始的存成功一张再去存下一张的方法去写的。
- 那么现在，放一波可能会用到的函数，大多都是抄过来的，省的去找：
// 设置预览参数 function setlPreviewMode() { if (DWObject) { var o = parseInt(document.getElementById("DW_PreviewMode").selectedIndex + 1); DWObject.SetViewMode(o, o); } } // 删除所有图像 function btnRemoveAllImages_onclick() { if (DWObject) { DWObject.RemoveAllImages(); document.getElementById("DW_TotalImage").value = "0"; document.getElementById("DW_CurrentImage").value = "0"; } } // 刷新页面信息 function updatePageInfo(){ if (DWObject) { document.getElementById("DW_TotalImage").value = DWObject.HowManyImagesInBuffer; //不能再多了，自己去找 ************** } } // 第一页 function btnFirstImage_onclick() { if (DWObject) { if (DWObject.HowManyImagesInBuffer != 0 && DWObject.CurrentImageIndexInBuffer != 0) { DWObject.CurrentImageIndexInBuffer = 0; updatePageInfo(); } } } // 下一页 function btnNextImage_onclick() { if (DWObject) { if (DWObject.HowManyImagesInBuffer > 0) { DWObject.CurrentImageIndexInBuffer = DWObject.CurrentImageIndexInBuffer + 1; updatePageInfo(); } } } // 上一页 function btnPreImage_onclick() { if (DWObject) { if (DWObject.HowManyImagesInBuffer > 0) { DWObject.CurrentImageIndexInBuffer = DWObject.CurrentImageIndexInBuffer - 1; updatePageInfo(); } } } // 横向旋转 function btnRotate180_onclick() { if (!checkIfImagesInBuffer()) { return; } DWObject.Rotate(DWObject.CurrentImageIndexInBuffer, 180, true); appendMessage('<b>Rotate 180: </b>'); if (checkErrorString()) { return; } } // 检测是否有图片 function checkIfImagesInBuffer() { if (DWObject.HowManyImagesInBuffer == 0) { window.alert("没有检测到图片，请确认!"); return false; }else{ return true; } }
三、总结
想把这个SDK弄通还是比较难的，我写的这部分之上帮助大家少走点弯路，别刚开始只能站在原地而已，弄懂还是需要花点时间的。
1001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
