掃描識別工具Dynamic Web TWAIN使用教程：移動瀏覽器捕獲（下）

---

將移動設備相機快速集成到Web應用程序中

【Dynamic Web TWAIN最新版免費下載>>>】

步驟4 首先嘗試使用移動瀏覽器頁面

此頁面適用于桌面瀏覽器和移動瀏覽器，在桌面Chrome中，如下圖所示：

在這里，你可以單擊“Show Video（顯示視頻）”以在PC上使用網絡攝像頭，或單擊“Grab Image（抓取圖像）”以加載本地文件。我們將加載一個文件。

加載文件后，會顯示刪除，上傳，編輯，下載等按鈕。

在移動瀏覽器中打開它（假設開發機器的IP是192.168.1.100）

//192.168.1.100:8080/AcquireFromPCsAndMobileDevices/MobileBrowserCapture.html

界面如下所示，你可以單擊“Grab Image”拍攝照片或加載本地文件

一旦加載/捕獲圖像

上傳并點擊Redirect以查看上傳文件的列表。

上傳的文件保存在System.getProperty（“user.dir”）指定的路徑中，加上運行時用戶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 測試適用于桌面的頁面

打開 //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 添加代碼以檢測環境。將文件命名為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下創建文件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>

現在，當你導航到 //192.168.1.100:8080/AcquireFromPCsAndMobileDevices/時，你將登陸到正在使用的瀏覽器的正確頁面。

---

想要購買正版授權，或者獲取更多Dynamic Web TWAIN相關信息的朋友可以點擊" "~