掃描識(shí)別工具Dynamic Web TWAIN使用教程:移動(dòng)瀏覽器捕獲(下)
將移動(dòng)設(shè)備相機(jī)快速集成到Web應(yīng)用程序中
【Dynamic Web TWAIN最新版免費(fèi)下載>>>】
步驟4 首先嘗試使用移動(dòng)瀏覽器頁面
此頁面適用于桌面瀏覽器和移動(dòng)瀏覽器,在桌面Chrome中,如下圖所示:
在這里,你可以單擊“Show Video(顯示視頻)”以在PC上使用網(wǎng)絡(luò)攝像頭,或單擊“Grab Image(抓取圖像)”以加載本地文件。我們將加載一個(gè)文件。
加載文件后,會(huì)顯示刪除,上傳,編輯,下載等按鈕。
在移動(dòng)瀏覽器中打開它(假設(shè)開發(fā)機(jī)器的IP是192.168.1.100)
http://192.168.1.100:8080/AcquireFromPCsAndMobileDevices/MobileBrowserCapture.html
界面如下所示,你可以單擊“Grab Image”拍攝照片或加載本地文件
一旦加載/捕獲圖像
上傳并點(diǎn)擊Redirect以查看上傳文件的列表。
上傳的文件保存在System.getProperty(“user.dir”)指定的路徑中,加上運(yùn)行時(shí)用戶ID。例如C:\Program Files\eclipse-jee-oxygen-3a-win32-x86_64\eclipse\Dynamsoft_Upload\391008ba-aa9f-4564-a285-b44a42ec7864
可以在以下文件中更改路徑。
AcquireFromPCsAndMobileDevices\WebContent\WEB-INF\web.xml <context-param> <param-name>dynamsoft_upload</param-name> <param-value>D:\\uploadedimages\\</param-value> </context-param>
文件將保存在 D:\uploadedimages\391008ba-aa9f-4564-a285-b44a42ec7864
步驟5 測(cè)試適用于桌面的頁面
打開 http://localhost:8080/AcquireFromPCsAndMobileDevices/Scan/CustomScan.html > 獲取圖像
步驟6 添加要上傳的按鈕
HTML
<input type="button" value="Upload" onclick="Upload();" />
JavaScript
function Upload() { if (DWObject) { var strFullActionPagePath = location.href.substr(0, location.href.lastIndexOf('/') + 1) + 'upload.jsp'; DWObject.HTTPUpload(strFullActionPagePath, [DWObject.CurrentImageIndexInBuffer], EnumDWT_ImageType.IT_JPG, EnumDWT_UploadDataFormat.Binary, "test.jpg", function(){}, function(errCode, errString){ console.log(errString);}); } }
JSP
<%@ page language="java" import="java.io.*,java.util.*,org.apache.commons.fileupload.*,org.apache.commons.fileupload.disk.*,org.apache.commons.fileupload.servlet.*"%><%! %><% // Create a factory for disk-based file items DiskFileItemFactory factory = new DiskFileItemFactory(); // Configure a repository (to ensure a secure temp location is used) ServletContext servletContext = this.getServletConfig().getServletContext(); File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir"); factory.setRepository(repository); // Set factory constraints factory.setSizeThreshold(1000000000);// Sets the size threshold beyond which files are written directly to disk. // Create a new file upload handler ServletFileUpload upload = new ServletFileUpload(factory); // Set overall request size constraint upload.setSizeMax(-1); // Parse the request List<FileItem> items = upload.parseRequest(request); // Process the uploaded items Iterator<FileItem> iter = items.iterator(); String _fields = ""; String fileName = ""; long sizeInBytes = 0; String path = application.getRealPath(request.getRequestURI()); String dir = request.getServletContext().getInitParameter("dynamsoft_upload"); dir = dir.replace("\\\\","/"); String _temp_Name = dir + "files-uploaded-in-pc-browsers"; File _fieldsTXT = new File(_temp_Name); if(!_fieldsTXT.exists()) { boolean result = _fieldsTXT.mkdirs(); System.out.println("File create result:"+result); } while (iter.hasNext()) { FileItem item = iter.next(); // Process a regular form field if (item.isFormField()) { } // Process a file upload else { String fieldName = item.getFieldName(); fileName = item.getName(); String contentType = item.getContentType(); boolean isInMemory = item.isInMemory(); sizeInBytes = item.getSize(); if(fileName!=null && sizeInBytes!=0){ File uploadedFile = new File(_temp_Name + "/" + fileName); if(!uploadedFile.exists()) { boolean result = uploadedFile.createNewFile(); System.out.println("File create result:"+result); } try { item.write(uploadedFile); } catch (Exception e) { e.printStackTrace(); } } } } %>
步驟7 添加代碼以檢測(cè)環(huán)境。將文件命名為common.js并將其放在WebContent/js/下
var dynamsoft = dynamsoft || {}; (function () { var ua = navigator.userAgent.toLowerCase(), _platform = navigator.platform.toLowerCase(), _bWin = (_platform == 'win32') || (_platform == 'win64') || (_platform == 'windows'), _nMSIE = ua.indexOf('msie'), _nTrident = ua.indexOf('trident'), _nRV = ua.indexOf('rv:'), _nEdge = ua.indexOf('edge'), _tmp = ua.match(/version\/([\d.]+).*safari/), _bSafari = _tmp ? !0 : !1, _nSafari = _tmp ? _tmp[1] : 0, _nFirefox = ua.indexOf('firefox'), _bFirefox = (_nFirefox != -1), _bEdge = _bWin && !_bFirefox && (_nEdge != -1), _indexOfChrome = ua.indexOf('chrome'), _bChrome = !_bEdge && (_indexOfChrome != -1), _bIE = _bWin && !_bFirefox && !_bEdge && !_bChrome && (_nMSIE != -1 || _nTrident != -1 || _nRV != -1), _strBrowserVersion = '', _mainVer = 0; var _deviceType, bIsIpad = ua.match(/ipad/i) == "ipad", bIsIphoneOs = ua.match(/iphone os/i) == "iphone os", bIsMidp = ua.match(/midp/i) == "midp", bIsUc7 = ua.match(/rv:1.2.3.4/i) == "rv:1.2.3.4", bIsUc = ua.match(/ucweb/i) == "ucweb", bIsAndroid = ua.match(/android/i) == "android", bIsCE = ua.match(/windows ce/i) == "windows ce", bIsWM = ua.match(/windows mobile/i) == "windows mobile"; if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { _deviceType = 'phone'; } else { _deviceType = 'pc'; } if (_bEdge) { _tmp = ua.slice(_nEdge + 5); _tmp = _tmp.slice(0, _tmp.indexOf(' ')); _strBrowserVersion = _tmp; } else if (_bChrome) { _tmp = ua.slice(_indexOfChrome + 7); _tmp = _tmp.slice(0, _tmp.indexOf(' ')); _strBrowserVersion = _tmp; } else if (_bFirefox) {// FF _tmp = ua.slice(_nFirefox + 8); _tmp = _tmp.slice(0, _tmp.indexOf(' ')); _strBrowserVersion = _tmp; } else if (_bIE) { if (_nMSIE != -1) { // 'msie' _tmp = ua.slice(_nMSIE + 4); _tmp = _tmp.slice(0, _tmp.indexOf(';')); _strBrowserVersion = _tmp; } else if (_nRV != -1) { // 'rv:' _tmp = ua.slice(_nRV + 3); _tmp = _tmp.slice(0, _tmp.indexOf(';')); _tmp = _tmp.slice(0, _tmp.indexOf(')')); _strBrowserVersion = _tmp; } else if (_nTrident != -1) { // 'trident' _tmp = ua.slice(_nTrident + 7); _tmp = _tmp.slice(0, _tmp.indexOf(';')); _strBrowserVersion = _tmp; } } else if (_bSafari) { if (_tmp) { _strBrowserVersion = _tmp[1]; } } if (_strBrowserVersion.indexOf('.') > -1) _mainVer = _strBrowserVersion.slice(0, _strBrowserVersion.indexOf('.')) * 1.0; dynamsoft.onlineNavInfo = { bWin: _bWin, bIE: _bIE, bEdge: _bEdge, bFirefox: _bFirefox, bChrome: _bChrome, bSafari: _bSafari, strVersion: _strBrowserVersion, mainVer: _mainVer, deviceType: _deviceType }; })(); var strHREF = window.location.href; if (dynamsoft.onlineNavInfo.deviceType == 'pc') { if (strHREF.indexOf('CustomScan') == -1) window.location.replace(strHREF.substr(0, strHREF.lastIndexOf('AcquireFromPCsAndMobileDevices') + 30) + '/Scan/CustomScan.html'); } else { if (strHREF.indexOf('MobileBrowserCapture') == -1) window.location.replace(strHREF.substr(0, strHREF.lastIndexOf('AcquireFromPCsAndMobileDevices') + 30) + '/MobileBrowserCapture.html');
步驟8 使用以下代碼在WebContent下創(chuàng)建文件index.jsp
<%@ page session="false" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Capture Anywhere</title> </head> <body> <h1>Redirecting</h1> </body> <script type="text/javascript" src="js/common.js"></script> </html>
在MobileBrowserCapture.html和CustomScan.html中引用common.js
<script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="../js/common.js"></script>
現(xiàn)在,當(dāng)你導(dǎo)航到 http://192.168.1.100:8080/AcquireFromPCsAndMobileDevices/時(shí),你將登陸到正在使用的瀏覽器的正確頁面。