這篇文章主要介紹“怎么用ASP.NET做一個(gè)跨平臺(tái)的文檔掃描應(yīng)用”,在日常操作中,相信很多人在怎么用ASP.NET做一個(gè)跨平臺(tái)的文檔掃描應(yīng)用問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”怎么用ASP.NET做一個(gè)跨平臺(tái)的文檔掃描應(yīng)用”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
創(chuàng)新互聯(lián)公司是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開發(fā),網(wǎng)站制作,網(wǎng)站設(shè)計(jì),網(wǎng)站模板,微信公眾號(hào)開發(fā),軟件開發(fā),小程序設(shè)計(jì),十余年建站對(duì)成都紙箱等多個(gè)方面,擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)。
ASP.NET Core以優(yōu)異的性能、良好的跨平臺(tái)特性、完善的文檔支持,在開發(fā)者之中獲得了不錯(cuò)的反響。C# Web應(yīng)用開發(fā)者從此可以沿用既有的技術(shù)棧進(jìn)行跨平臺(tái)的Web應(yīng)用開發(fā)。
首先,我們需要安裝Dynamic Web TWAIN,以進(jìn)行我們的開發(fā)工作。如果你以前沒有安裝過這個(gè)SDK,可以去Dynamic Web TWAIN下載頁面下載最新的版本。
其次,對(duì)于從未使用過C#的開發(fā)者而言,可能還需要安裝.Net Core環(huán)境。前往微軟的下載頁面,下載 .Net Core SDK(注意:開發(fā)者需要下載安裝SDK,Runtime包含在SDK里無需額外下載)。
我們強(qiáng)烈推薦開發(fā)者在Windows上使用Visual Studio進(jìn)行開發(fā),這將大大減少配置工作量。
無論進(jìn)行任何項(xiàng)目的開發(fā),創(chuàng)建一個(gè)工程項(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迎頁面的右下側(cè),選擇Create a new project。
然后,在創(chuàng)建項(xiàng)目的頁面,選擇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)建好了。
對(duì)于Linux用戶而言,只能通過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)目,但是沒有那么全面Visual Studio。
我們現(xiàn)在來導(dǎo)入Dynamic Web TWAIN,通常你能在C:\Program Files (x86)\Dynamic\Dynamic Web TWAIN SDK <version>
找著Resources
文件夾,里面包含了所需的工作文件。
我們將Resources
文件夾拷貝至/wwwroot/lib
,并將Resources
重命名為dwt
。
進(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ò)誤。
找到Dynamsoft.WebTwainEnv.Containers
字段,你可以修改或者記住ContainerId
,在View里面我們需要?jiǎng)?chuàng)建一個(gè)具有此ID的<div></div>
元素。
在開發(fā)之前,我們來看一下項(xiàng)目的結(jié)構(gòu)。
通過CLI創(chuàng)建項(xiàng)目的讀者,可以參考這張圖補(bǔ)全CLI工具沒有創(chuàng)建的文件,或者使用dotnet-aspnet-codegenerator工具生成欠缺的文件。當(dāng)然,我們?cè)谀┪矔?huì)附上所有的源代碼,你也可以基于源代碼進(jìn)行進(jìn)一步的開發(fā)。
我們來創(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è)輸入框,來提供掃描與上傳功能。
我們通過額外的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(); } } }
我們已經(jīng)完成了所有代碼的編寫,現(xiàn)在來測(cè)試以下程序功能。
Visual Studio用戶,提供單擊頂部的運(yùn)行按鈕運(yùn)行程序。
CLI用戶通過在命令行輸入以下命令運(yùn)行程序
dotnet restore dotnet run
一旦服務(wù)器正常啟動(dòng),在跳出的瀏覽器窗口內(nèi)你將看到頁面的下部有個(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)注創(chuàng)新互聯(lián)網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
文章題目:怎么用ASP.NET做一個(gè)跨平臺(tái)的文檔掃描應(yīng)用
分享鏈接:http://redsoil1982.com.cn/article4/ghojoe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、標(biāo)簽優(yōu)化、App設(shè)計(jì)、網(wǎng)站內(nèi)鏈、動(dòng)態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)