Получение изображений от TWAIN сканера в ASP.NET Core + Angular приложении
В этом разделе
В этом руководстве показано, как создать пустое ASP.NET Core Web приложение в Visual Studio .NET 2022 и получать изображения от TWAIN сканера в ASP.NET Core + Angular приложении.
Вот действия, которые необходимо выполнить:
-
Создайте пустое ASP.NET Core Web приложение.
Откройте Visual Studio .NET 2022 и создайте новый проект приложения типа ASP.NET Core Web:
Выберите шаблон "Angular" для ASP.NET Core Web приложения и сконфигурируйте проект для использования ASP.NET Core 6.0:
Скомпилируйте проект для восстановления зависимостей.
-
Клиентская сторона: Удалите файлы, которые не нужны в этом демо.
- Удалите директории "ClientApp\src\app\counter\", "ClientApp\src\app\fetch-data\", "ClientApp\src\app\home\", "ClientApp\src\app\nav-menu\" - эти Angular компоненты не нужны в этом демо.
- Откройте файл "ClientApp\src\app\app.component.html" и удалите строку "<app-nav-menu></app-nav-menu>" из HTML разметки - это демо не требует навигационного меню.
-
Откройте файл "ClientApp\src\app\app.module.ts" и удалите код, который использует следующие Angular компоненты: NavMenuComponent, HomeComponent, CounterComponent, FetchDataComponent - эти Angular компоненты не нужны в этом демо.
Вот TypeScript код файла "app.module.ts" после изменения:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
RouterModule.forRoot([
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
-
Клиентская сторона: Добавьте инсталлятор VintaSoft Web TWAIN сервиса в ASP.NET Core Web приложение.
- Добавьте папку "Data" в папку "wwwroot".
-
Загрузите ZIP-архив с Windows инсталлятором для VintaSoft Web TWAIN сервиса по ссылке https://www.vintasoft.ru/zip/VintasoftWebTwainService-15.0.5.zip и скопируйте ZIP-архив в папку "wwwroot\Data\".
VintaSoft Web TWAIN сервис это Windows сервис, который обеспечивает Web API для доступа к локальным TWAIN сканерам для всех пользователей локального компьютера. Больше информации по VintaSoft Web TWAIN сервису можно найти здесь.
-
Клиентская сторона: Добавьте JavaScript файлы и TypeScript модули в ASP.NET Core Web приложение.
- Добавьте папку "assets" к папке "ClientApp\src\app\".
-
Получите файлы Vintasoft.Shared.js, Vintasoft.Twain.js, Vintasoft.Shared.d.ts и Vintasoft.Twain.d.ts из папки "<SDK_install_path>\Bin\JavaScript\" инсталляции VintaSoft TWAIN .NET SDK или из npm-пакета 'vintasoft-web-twain-js'. Скопируйте Vintasoft JavaScript файлы в папку "ClientApp\src\app\assets\".
-
Установите "Build Action" в "TypeScript file" для файлов Vintasoft.Shared.d.ts и Vintasoft.Twain.d.ts:
-
Добавьте ссылки на Vintasoft JavaScript файлы к секции "projects => Demo => architect => build => options => scripts" в файле "ClientApp\angular.json":
...
"scripts": [
"src/app/assets/Vintasoft.Shared.js",
"src/app/assets/Vintasoft.Twain.js"
]
...
-
Клиентская сторона: Создайте Angular компонент, который получает изображение от TWAIN сканера и отображает отсканированное изображение.
-
Создайте папку "ClientApp\src\app\twain-scanning-demo\".
Создайте файл "twain-scanning-demo.component.html", который будет содержать HTML разметку Angular-компонента:
- Выберите "Add => New Item..." из контекстного меню для папки "ClientApp\src\app\twain-scanning-demo\" => появится диалоговое окно "Add new item"
- Выберите тип "HTML Page" для нового элемента
- Установите "twain-scanning-demo.component.html" в качестве имени элемента
- Нажмите кнопку "Add" => диалоговое окно будет закрыто, и файл "twain-scanning-demo.component.html" будет добавлен в папку "ClientApp\src\app\twain-scanning-demo\"
Добавьте HTML-разметку (заголовок приложения и image-элемент, который будет отображать изображение, полученное от TWAIN сканера) к файлу "twain-scanning-demo.component.html":
<div style="text-align:center">
<h1>Angular TWAIN Scanning Demo</h1>
<h3>Preview of scanned image</h3>
<input type="image" id="previewImage" alt="Preview of scanned image" style="border:1px solid black; width:350px; height:350px" />
<br />
<br />
<a id="vintasoftWebTwainServiceInstallerLinkId" href="https://www.vintasoft.ru/zip/VintasoftWebTwainService-15.0.5.zip" hidden>Download installer of VintaSoft Web TWAIN service</a>
</div>
Создайте файл "twain-scanning-demo.component.ts", который будет содержать код Angular компонента:
- Выберите "Add => New Item..." из контекстного меню для папки "ClientApp\src\app\twain-scanning-demo\" => появится диалоговое окно "Add new item"
- Выберите тип "TypeScript File" для нового элемента
- Установите "twain-scanning-demo.component.ts" в качестве имени элемента
- Нажмите кнопку "Add" => диалоговое окно будет закрыто, и файл "twain-scanning-demo.component.ts" будет добавлен в папку "ClientApp\src\app\twain-scanning-demo\"
Добавьте TypeScript код к файлу "twain-scanning-demo.component.cs":
import { Component } from '@angular/core';
@Component({
selector: 'twain-scanning-demo',
templateUrl: './twain-scanning-demo.component.html'
})
export class TwainScanningDemoComponent {
ngOnInit() {
// acquire images from TWAIN/SANE scanner
this.__acquireImageFromTwainScanner();
}
/**
* Acquires images from TWAIN/SANE scanner.
*/
__acquireImageFromTwainScanner() {
// register the evaluation version of VintaSoft Web TWAIN service
// please read how to get evaluation license in documentation: https://www.vintasoft.ru/docs/vstwain-dotnet-web/Licensing-Twain_Web-Evaluation.html
Vintasoft.Twain.WebTwainGlobalSettingsJS.register('REG_USER', 'REG_URL', 'REG_CODE', 'EXPIRATION_DATE');
// URL to the VintaSoft Web TWAIN service
let serviceUrl: string = 'https://localhost:25329/api/VintasoftTwainApi';
// a Web API controller that allows to work with TWAIN and SANE devices
let twainService: Vintasoft.Shared.WebServiceControllerJS = new Vintasoft.Shared.WebServiceControllerJS(serviceUrl);
// TWAIN/SANE device manager
let deviceManager: Vintasoft.Twain.WebTwainDeviceManagerJS = new Vintasoft.Twain.WebTwainDeviceManagerJS(twainService);
// the default settings of device manager
let deviceManagerInitSetting: Vintasoft.Twain.WebTwainDeviceManagerInitSettingsJS = new Vintasoft.Twain.WebTwainDeviceManagerInitSettingsJS();
try {
// open device manager
deviceManager.open(deviceManagerInitSetting);
}
catch (ex) {
if (ex.toString().startsWith('NetworkError')) {
document.getElementById('vintasoftWebTwainServiceInstallerLinkId').hidden = false;
alert("VintaSoft Web TWAIN service is not found.\n\nPlease close this dialog, link 'Download installer of VintaSoft Web TWAIN service' will appear at the top of this page, click the link, download VintaSoft Web TWAIN Service, manually install the service on your computer, reload this web page in web browser (Firefox must be restarted) and try to scan images once again.");
}
else
alert(ex);
return;
}
let device: Vintasoft.Twain.WebTwainDeviceJS = null;
try {
// get the default TWAIN/SANE device
device = deviceManager.get_DefaultDevice();
// open device without UI
device.open(false);
let acquireModalState: number;
do {
// do one step of modal image acquisition process
let acquireModalResult: Vintasoft.Twain.WebTwainDeviceAcquireModalResultJS = device.acquireModalSync();
// get state of image acquisition
acquireModalState = acquireModalResult.get_AcquireModalState().valueOf() as number;
switch (acquireModalState) {
case 2: // image is acquired
// get acquired image
let acquiredImage: Vintasoft.Twain.WebAcquiredImageJS = acquireModalResult.get_AcquiredImage();
// get image as Base64 string
let bitmapAsBase64String: string = acquiredImage.getAsBase64String();
// update image preview
let previewImageElement: HTMLImageElement = document.getElementById('previewImage') as HTMLImageElement;
previewImageElement.src = bitmapAsBase64String;
break;
case 4: // image scan is failed
alert(acquireModalResult.get_ErrorMessage());
break;
case 9: // image scan is finished
break;
}
}
while (acquireModalState !== 0);
}
catch (ex) {
alert(ex);
}
finally {
if (device != null) {
// close the device
device.close();
}
// close the device manager
deviceManager.close();
}
}
}
-
Добавьте созданный Angular компонент к модулю Angular приложения - файлу "ClientApp\src\app\app.module.ts".
Вот TypeScript код файла "app.module.ts" после обновления:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { TwainScanningDemoComponent } from './twain-scanning-demo/twain-scanning-demo.component';
@NgModule({
declarations: [
AppComponent,
TwainScanningDemoComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
RouterModule.forRoot([
{ path: '', component: TwainScanningDemoComponent, pathMatch: 'full' },
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
-
Запустите ASP.NET Core Web приложение с Angular и посмотрите результат.
Если VintaSoft Web TWAIN сервис не установлен на Вашем компьютере (Вы увидите сообщение об ошибке), Вам нужно выполнить следующие действия:
- нажмите на ссылку "Загрузить инсталлятор VintaSoft Web TWAIN сервиса"
- загрузите инсталлятор VintaSoft Web TWAIN сервиса на Ваш компьютер
- установите VintaSoft Web TWAIN сервис на Ваш компьютер
- обновите страницу приложения в браузере