怎么用ASP.NET做一個(gè)跨平臺(tái)的文檔掃描應(yīng)用

這篇文章主要介紹“怎么用ASP.NET做一個(gè)跨平臺(tái)的文檔掃描應(yīng)用”，在日常操作中，相信很多人在怎么用ASP.NET做一個(gè)跨平臺(tái)的文檔掃描應(yīng)用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么用ASP.NET做一個(gè)跨平臺(tái)的文檔掃描應(yīng)用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

ASP.NET Core以優(yōu)異的性能、良好的跨平臺(tái)特性、完善的文檔支持，在開發(fā)者之中獲得了不錯(cuò)的反響。C# Web應(yīng)用開發(fā)者從此可以沿用既有的技術(shù)棧進(jìn)行跨平臺(tái)的Web應(yīng)用開發(fā)。

準(zhǔn)備工作

首先，我們需要安裝Dynamic Web TWAIN，以進(jìn)行我們的開發(fā)工作。如果你以前沒(méi)有安裝過(guò)這個(gè)SDK，可以去Dynamic Web TWAIN下載頁(yè)面下載最新的版本。

其次，對(duì)于從未使用過(guò)C#的開發(fā)者而言，可能還需要安裝.Net Core環(huán)境。前往微軟的下載頁(yè)面，下載 .Net Core SDK（注意：開發(fā)者需要下載安裝SDK，Runtime包含在SDK里無(wú)需額外下載）。

我們強(qiáng)烈推薦開發(fā)者在Windows上使用Visual Studio進(jìn)行開發(fā)，這將大大減少配置工作量。

創(chuàng)建項(xiàng)目

無(wú)論進(jìn)行任何項(xiàng)目的開發(fā)，創(chuàng)建一個(gè)工程項(xiàng)目總是第一步。這里我將著重介紹如何使用Visual Studio創(chuàng)建項(xiàng)目。

用Visual Studio創(chuàng)建項(xiàng)目

對(duì)于Windows用戶而言，創(chuàng)建一個(gè)ASP.NET Core MVC項(xiàng)目如同喝奶茶一樣簡(jiǎn)單。Visual Studio提供了模板與自動(dòng)化工具幫助開發(fā)者自動(dòng)創(chuàng)建項(xiàng)目，開發(fā)者在很多情況下僅需稍作修改便可將項(xiàng)目投入使用。

首先，我們?cè)跉g迎頁(yè)面的右下側(cè)，選擇Create a new project。

然后，在創(chuàng)建項(xiàng)目的頁(yè)面，選擇ASP.NET Core Web Application。

接著，Visual Studio讓我們提供一個(gè)名字。我們將它命名為dwtDotCore。

最后，我們需要選擇ASP.NET Core Web Application的類型，這里建議選擇Model-View-Controller。我們稍后會(huì)將Dynamic Web TWAIN相關(guān)的內(nèi)容在View里實(shí)現(xiàn)。除此之外，我們待會(huì)還會(huì)創(chuàng)建一個(gè)API Controller用于實(shí)現(xiàn)文件上傳需求。

到這，項(xiàng)目就創(chuàng)建好了。

用命令行工具創(chuàng)建項(xiàng)目

對(duì)于Linux用戶而言，只能通過(guò)CLI進(jìn)行項(xiàng)目創(chuàng)建。啟動(dòng)終端，將工作目錄切換到需要存放項(xiàng)目的路徑，然后輸入以下命令

dotnet new webapp -o dwtDotNet --no-https

該命令將會(huì)創(chuàng)建一個(gè)ASP.NET Core MVC項(xiàng)目，但是沒(méi)有那么全面Visual Studio。

配置項(xiàng)目

我們現(xiàn)在來(lái)導(dǎo)入Dynamic Web TWAIN，通常你能在C:\Program Files (x86)\Dynamic\Dynamic Web TWAIN SDK <version>找著Resources文件夾，里面包含了所需的工作文件。

1. 我們將Resources文件夾拷貝至/wwwroot/lib，并將Resources重命名為dwt。

2. 進(jìn)入dwt文件夾，打開dynamsoft.webtwain.config.js，找到Dynamsoft.WebTwainEnv.ResourcesPath字段，將其反注釋，并將值改為'/lib/dwt'

• Dynamic Web TWAIN的加載依賴若干個(gè)資源文件，因此需要對(duì)發(fā)布后資源文件所在的相對(duì)路徑指定清楚，不然會(huì)報(bào)404 NOT FOUND錯(cuò)誤。

3. 找到Dynamsoft.WebTwainEnv.Containers字段，你可以修改或者記住ContainerId，在View里面我們需要?jiǎng)?chuàng)建一個(gè)具有此ID的<div></div>元素。

功能開發(fā)

在開發(fā)之前，我們來(lái)看一下項(xiàng)目的結(jié)構(gòu)。

通過(guò)CLI創(chuàng)建項(xiàng)目的讀者，可以參考這張圖補(bǔ)全CLI工具沒(méi)有創(chuàng)建的文件，或者使用dotnet-aspnet-codegenerator工具生成欠缺的文件。當(dāng)然，我們?cè)谀┪矔?huì)附上所有的源代碼，你也可以基于源代碼進(jìn)行進(jìn)一步的開發(fā)。

創(chuàng)建View

我們來(lái)創(chuàng)建掃描界面。在此之前，記得移除已有的代碼。

將下列代碼貼入index.cshtml中

@{
    ViewData["Title"] = "Home Page";
}

<div class="container-fluid">
    <div id="control-panel">
        <button class="btn btn-primary" onclick="AcquireImage()">Scan</button>
        <br />
        <button class="btn btn-outline-secondary" onclick="Upload()">Upload</button>
        <input type="radio" value="jpg" name="format" />JPG
        <input type="radio" value="pdf" name="format" />PDF
        <input type="radio" value="tif" name="format" />TIFF
        <label for="filename-input">File Name: </label>
        <input type="text" id="filename-input" />
    </div>
    <div id="dwt-container">
    </div>
</div>

<!-- DWT script here -->
<script src="~/lib/dwt/dynamsoft.webtwain.initiate.js"></script>
<script src="~/lib/dwt/dynamsoft.webtwain.config.js"></script>
<script>
    function AcquireImage() {
        const DWObj = Dynamsoft.WebTwainEnv.GetWebTwain('dwt-container')
        if (DWObj) {
            if (DWObj.UseLocalService) {
                DWObj.SelectSource(function () {
                    var OnAcquireImageSuccess = OnAcquireImageFailure = function () {
                        DWObj.CloseSource()
                    }
                    DWObj.OpenSource()
                    DWObj.IfDisableSourceAfterAcquire = true
                    DWObj.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure)
                }, function () {
                    console.log('SelectSource failed')
                })
            } else {
                DWObj.LoadImageEx('', -1)
            }
        }
    }
    function Upload() {
        const host = location.hostname
        const protocol = location.protocol
        const uploadPath = '/api/File'
        let uploadFileName = document.getElementById('filename-input').value
        const port = location.port || (protocol === 'https:' ? 443 : 80)

        var formatSelector = document.getElementsByName('format')
        let format = (selector => {
            let select = ''
            selector.forEach(e => {
                if (e.checked) {
                    select = e.value
                }
            })
            uploadFileName = uploadFileName + '.' + select
            switch (select) {
                case 'jpg': { return Dynamsoft.EnumDWT_ImageType.IT_JPG }
                case 'pdf': { return Dynamsoft.EnumDWT_ImageType.IT_PDF }
                case 'tif': { return Dynamsoft.EnumDWT_ImageType.IT_TIF }
            }
        })(formatSelector)

        let uploadFormat = Dynamsoft.EnumDWT_UploadDataFormat.Binary

        const DWObj = Dynamsoft.WebTwainEnv.GetWebTwain('dwt-container')
        if (DWObj) {
            DWObj.HTTPPort = port
            DWObj.IfSSL = true
            let indices = DWObj.SelectedImagesIndices
            DWObj.HTTPUpload(
                protocol + '//' + host + ':' + port + uploadPath,
                indices,
                format,
                uploadFormat,
                uploadFileName,
                () => { alert('success') },
                (errCode, errStr, res) => {
                    console.error(`${errCode}: ${errStr}. Server return: ${ res }`)
                }
            )
        }
    }
</script>

特別需要注意的是，dynamsoft.webtwain.initiate.js與dynamsoft.webtwain.config.js需要單獨(dú)引入，并且要保證先后順序。

我們?cè)O(shè)置了兩個(gè)按鈕，一組單選選項(xiàng)，以及一個(gè)輸入框，來(lái)提供掃描與上傳功能。

實(shí)現(xiàn)文件上傳

我們通過(guò)額外的API提供文件上傳服務(wù)。

右鍵單擊Controller文件夾，選擇Add -> New Scaffolded Item...

在彈出窗口中，選擇API Controller with read/write actions.

然后，僅作文件名修改。在后續(xù)的窗口中，將文件名命名為FileController.cs。

最后，將新創(chuàng)建的Controller改為如下所示的代碼

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

// For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace dwtDotCore.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class FileController : ControllerBase
    {
        // POST api/<FileController>
        [HttpPost]
        public async Task<IActionResult> Upload()
        {
            var files = Request.Form.Files;
            var path = Path.Combine(Directory.GetCurrentDirectory(), "Upload");
            if (!Directory.Exists(path))
            {
                try
                {
                    Directory.CreateDirectory(path);
                }
                catch (Exception e)
                {
                    Debug.WriteLine(e.StackTrace.ToString());
                    return Unauthorized("not able to create");
                }
            }
            foreach (var uploadFile in files)
            {
                var fileName = uploadFile.FileName;
                using (var stream = System.IO.File.Create(Path.Combine(path, fileName)))
                {
                    await uploadFile.CopyToAsync(stream);
                }
            }
            return Ok();
        }
    }

}

運(yùn)行程序

我們已經(jīng)完成了所有代碼的編寫，現(xiàn)在來(lái)測(cè)試以下程序功能。

Visual Studio用戶，提供單擊頂部的運(yùn)行按鈕運(yùn)行程序。

CLI用戶通過(guò)在命令行輸入以下命令運(yùn)行程序

dotnet restore
dotnet run

一旦服務(wù)器正常啟動(dòng)，在跳出的瀏覽器窗口內(nèi)你將看到頁(yè)面的下部有個(gè)矩形框，代表Dynamic Web TWAIN被成功加載。

點(diǎn)擊Scan，跳出掃描源選擇器。

掃描成功。

點(diǎn)擊上傳，將掃描的文檔上傳至服務(wù)器。

在服務(wù)端指定的文件夾下確認(rèn)上傳文件。

到此，關(guān)于“怎么用ASP.NET做一個(gè)跨平臺(tái)的文檔掃描應(yīng)用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！