原文地址:www.dynamsoft.com/codepool/as…
原文作者:
发布时间:2020年9月21日
ASP.NET Core可以让C#应用程序在*nix操作系统上运行。在本教程中,我们将使用ASP.NET Core和Dynamic Web TWAIN SDK来构建一个适用于Windows、Linux和macOS的DotNet Core文档扫描应用程序。
准备工作
首先,我们应该在环境中安装Dynamic Web TWAIN。如果你从来没有安装过该库,请参考www.dynamsoft.com/docs/dwt/De…
其次,我们需要安装.NET Core SDK。请注意,开发者需要的是SDK而不是Runtime。下载页面可以访问dotnet.microsoft.com/download。
我们强烈建议Windows开发者使用Visual Studio,因为它可以为我们自动完成一些步骤。
创建ASP DotNet Core文档扫描项目
我们的第一步是创建项目。我们有两种方法来开发项目。
用Visual Studio创建
对于Windows用户来说,创建一个ASP.NET Core MVC应用程序就像倒一个java杯子一样简单。Visual Studio为开发人员提供了一个项目创建指南。当你启动Visual Studio时,你会看到右下角按钮上的欢迎对话框,创建一个新项目。
在欢迎页面选择右侧面板的最后一个选项(入门)。
然后,我们选择ASP.NET Core Web Application,进入下一步。
选择ASP.NET Core Web Application作为模板。
最后,我们要指定项目名称。我们刚刚创建了DotNet Core文档扫描项目,但还没有完成初始化。
用 "dwtDotCore "来命名项目。
在这里,我们推荐使用MVC模型。控制器直接返回扫描视图。因此,我们不需要为我们的Home控制器写任何代码。我们只需要实现一个API来实现后面的文件上传。
使用Model-View-Controller模板初始化ASP.NET Core网络应用。
选择模型并点击 "创建 "按钮后,您就完成了项目的创建。
使用 CLI 创建
Linux用户无法从Visual Studio中获益,但有一个CLI工具可以创建一个项目。
打开一个终端,输入以下命令来创建一个项目。
dotnet new webapp -o dwtDotNet --no-https
该命令的意思是用模板webapp创建一个.NET Core应用程序,该模板是ASP.NET Core MVC的模板,名称为dwtDotNet,并禁用HTTPS。
配置
在进入开发阶段之前,我们需要配置我们的项目,以确保依赖关系能够被正确加载。
复制Web TWAIN SDK的资源文件
资源文件位于你的安装文件夹中,即'C:\Program Files (x86)\Dynamsoft/Dynamic Web TWAIN SDK <版本>'。复制整个Resources文件夹并粘贴到项目文件夹中的'/wwwroot/lib'。最好将 "Resources "重命名为一个有意义的名字,比如 "dwt"。
配置资源路径
Dynamic Web TWAIN依靠额外的脚本和样式表来支持其运行。开发者应该指定这些支持文件的位置。进入复制的文件夹,你会看到一个名为 "dynamsoft.webtwain.config.js "的文件。让我们打开它并进行一些修改。
首先,取消Dynamic.WebTwainEnv.ResourcesPath这一行的comment。然后,把它的值指定为'/wwwroot/lib/dwt',这是动态Web TWAIN的路径。
其次,我们要告诉WebTWAIN关于DOM的名称,其中包含Dynamic Web TWAIN查看器。你可以指定另一个名字或者使用默认的名字。它必须在HTML和config.js之间保持一致。
开发
我们很兴奋,因为我们的配置工作不多,已经全部完成。我们可以开始写下第一行代码了。在编码之前,我先介绍一下项目的结构。
我们项目的项目结构
我们的应用是一个典型的Model-View-Controller应用,其中Controller负责处理请求,并以相应的视图进行响应。模型是我们业务的抽象。在本教程中,我们没有任何数据需要存储,所以模型和数据库是不必要的。需要注意的是,dotnet CLI工具可能不会创建带有控制器、模型和视图的项目。如果你使用的是Linux/macOS,或者喜欢在Windows上使用CLI,你可以以此为参考手动添加,或者参考dotnet-aspnet-codeegenerator工具。我们将在最后附上源代码,以便您也可以根据我们的演示来构建您的应用程序。
我们将在Index.cshtml中实现UI,在HomeController.cs中实现逻辑。
扫描视图的实现
我们删除预定义的代码,并把我们的代码放在Index.cshtml中。
<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>
我们在页面上放置了两个按钮、一个输入框和一组单选框。我们的应用程序将为终端用户提供扫描和上传功能。需要提醒的是,脚本文件必须按顺序加载。另外,你可以从我们产品网站的API文档中找到其他的HTTP上传方式。但我们要把它们统一到HTTPUpload中。最好不要使用其他方法,这样一旦我们废弃了这些API,你就不需要做重大的改动。
在HomeController中,我们不需要做任何操作。为了实现文件上传功能,服务器端应该能够处理文件。我们把它作为一个API来服务客户。右击Controller文件夹,将光标移动到Add选项,然后选择 "New Scaffolded item..."。
选择 "新建脚手架项目 "来创建一个新的控制器。
在弹出的窗口中,我们选择具有读/写操作的API控制器。
创建一个具有读/写操作的API控制器
将控制器命名为 "FileController.cs"
Visual Studio会用一些初始代码创建控制器。我们至今不需要Get、Delete和Put。所以,我们从源代码中删除它们。
然后,我们在Post方法中添加一些代码。不要忘记解决依赖问题。
[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();
}
}
测试DotNet核心文档扫描
现在,我们已经完成了所有的实施工作。现在是时候检查我们的成果了。
在Visual Studio中,只需点击工具栏上的 "运行 "按钮即可运行应用程序。
点击带有 "IIS Express "标签的运行按钮,运行该项目。
或者,CLI用户只需输入以下命令来启动你的应用程序。
dotnet restore
dotnet run
当服务启动后,你会看到以下页面。
成功加载Web TWAIN SDK的应用程序的第一页。
点击 "扫描 "按钮选择扫描源。
从源头扫描文件
DotNet核心文件上传
并在您的上传目的地文件夹中看到您上传的文件。
上传的文件位于指定的