Получение изображений от TWAIN сканера в ASP.NET Core + React.js приложении
В этом разделе
В этом руководстве показано, как создать пустое ASP.NET Core Web приложение в Visual Studio .NET 2022 и получать изображения от TWAIN сканера в ASP.NET Core + React.js приложении.
Вот действия, которые необходимо выполнить:
-
Создайте пустое ASP.NET Core Web приложение.
Откройте Visual Studio .NET 2022 и создайте новый проект приложения типа ASP.NET Core Web:
Выберите шаблон "React.js" для ASP.NET Core Web приложения и сконфигурируйте проект для использования ASP.NET Core 6.0:
Скомпилируйте проект для восстановления зависимостей.
-
Клиентская сторона: Удалите файлы, которые не нужны в этом демо.
Удалите файлы "ClientApp\src\components\Counter.js", "ClientApp\src\components\FetchData.js", "ClientApp\src\components\Home.js", "ClientApp\src\components\NavMenu.js", "ClientApp\src\components\NavMenu.css" - эти React компоненты не нужны в этом демо.
Удалите файлы "WeatherForecast.cs" и "Controllers\WeatherForecastController.cs" - WeatherForecast Web API контроллер не нужен в этом демо.
Откройте файл "ClientApp\src\components\Layout.js" и удалите строки "import { NavMenu } from './NavMenu';" и "<NavMenu />" - для этого демо не требуется навигационное меню.
Откройте файл "ClientApp\src\AppRoutes.js" и удалите код, который использует следующие React компоненты: Home, FetchData, Counter - эти React компоненты не нужны в этом демо.
Вот исходный код файла "AppRoutes.js" после обновления:
import * as React from 'react';
import { Route } from 'react-router';
import Layout from './components/Layout';
import './custom.css'
export default () => (
<Layout>
</Layout>
);
-
Клиентская сторона: Добавьте инсталлятор VintaSoft Web TWAIN сервиса в ASP.NET Core Web приложение.
- Добавьте папку "Data" в папку "ClientApp\public".
-
Загрузите ZIP-архив с Windows инсталлятором для VintaSoft Web TWAIN сервиса по ссылке https://www.vintasoft.ru/zip/VintasoftWebTwainService-15.1.1.zip и скопируйте ZIP-архив в папку "ClientApp\public\Data\".
VintaSoft Web TWAIN сервис это Windows сервис, который обеспечивает Web API для доступа к локальным TWAIN сканерам для всех пользователей локального компьютера. Больше информации по VintaSoft Web TWAIN сервису можно найти здесь.
-
Клиентская сторона: Добавьте JavaScript файлы в ASP.NET Core Web приложение.
-
Получите файлы 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\public\".
-
Добавьте ссылки на Vintasoft JavaScript файлы к заголовку файла "ClientApp\public\index.html":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<base href="%PUBLIC_URL%/" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<script src="Vintasoft.Shared.js" type="text/javascript"></script>
<script src="Vintasoft.Twain.js" type="text/javascript"></script>
<title>ASP.NET Core + React.js TWAIN scanning demo</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
-
Клиентская сторона: Создайте React.js компонент, который получает изображение от TWAIN сканера и отображает отсканированное изображение.
-
Создайте файл "TwainScanningDemo.js", который будет содержать исходные коды компонента React.js (класс TwainScanningDemo):
- Выберите "Add => New Item..." из контекстного меню для папки "ClientApp\src\components\" => появится диалоговое окно "Add new item"
- Выберите тип "JavaScript File" для нового элемента
- Установите "TwainScanningDemo.js" в качестве имени элемента
- Нажмите кнопку "Add" => диалоговое окно закроется и файл "TwainScanningDemo.js" будет добавлен в папку "ClientApp\src\components\"
-
Добавьте объявление класса TwainScanningDemo с функцией "render" (функция создает заголовок приложения и image-элемент, который будет отображать изображение, полученное от TWAIN сканера) в файл "ClientApp\src\components\TwainScanningDemo.js".:
Вот JavaScript код компонента React.js (класс TwainScanningDemo) только с функцией 'render':
import React, { Component } from 'react';
export class TwainScanningDemo extends Component {
static displayName = TwainScanningDemo.name;
render() {
return (
<div class="mainDiv">
<h1>React.js TWAIN Scanning Demo</h1>
<h3>Preview of scanned image</h3>
<input type="image" id="previewImage" alt="Preview of scanned image" class="previewImage" />
<br />
<br />
<a id="vintasoftWebTwainServiceInstallerLinkId" href="/Data/VintasoftWebTwainService-15.1.1.zip" hidden>Download installer of VintaSoft Web TWAIN service</a>
</div>
);
}
}
-
Добавьте CSS-классы, которые используются в HTML разметке TwainScanningDemo, в файл "ClientApp\src\custom.css":
Вот CSS-код, который нужно добавить в файл "ClientApp\src\custom.css":
.mainDiv {
text-align: center;
}
.previewImage {
border: 1px solid black;
width: 350px;
height: 350px;
}
-
Добавьте функцию 'componentDidMount' (функция содержит JavaScript код, который получает изображение от TWAIN сканера и отображает отсканированное изображение) в класс TwainScanningDemo:
Вот JavaScript код React-компонента (класс TwainScanningDemo):
import React, { Component } from 'react';
export class TwainScanningDemo extends Component {
static displayName = TwainScanningDemo.name;
render() {
return (
<div class="mainDiv">
<h1>React.js TWAIN Scanning Demo</h1>
<h3>Preview of scanned image</h3>
<input type="image" id="previewImage" alt="Preview of scanned image" class="previewImage" />
<br />
<br />
<a id="vintasoftWebTwainServiceInstallerLinkId" href="/Data/VintasoftWebTwainService-15.1.1.zip" hidden>Download installer of VintaSoft Web TWAIN service</a>
</div>
);
}
componentDidMount() {
// declare reference to the Vintasoft namespace
let Vintasoft = window.Vintasoft;
// acquire images from TWAIN/SANE scanner
__acquireImageFromTwainScanner();
/**
* Acquires images from TWAIN/SANE scanner.
*/
function __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
var serviceUrl = 'https://localhost:25329/api/VintasoftTwainApi';
// a Web API controller that allows to work with TWAIN and SANE devices
var twainService = new Vintasoft.Shared.WebServiceControllerJS(serviceUrl);
// TWAIN/SANE device manager
var deviceManager = new Vintasoft.Twain.WebTwainDeviceManagerJS(twainService);
// the default settings of device manager
var deviceManagerInitSetting = 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;
}
var device = null;
try {
// get the default TWAIN/SANE device
device = deviceManager.get_DefaultDevice();
// open device without UI
device.open(false);
var acquireModalState;
do {
// do one step of modal image acquisition process
var acquireModalResult = device.acquireModalSync();
// get state of image acquisition
acquireModalState = acquireModalResult.get_AcquireModalState().valueOf();
switch (acquireModalState) {
case 2: // image is acquired
// get acquired image
var acquiredImage = acquireModalResult.get_AcquiredImage();
// get image as Base64 string
var bitmapAsBase64String = acquiredImage.getAsBase64String();
// update image preview
var previewImageElement = document.getElementById('previewImage');
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();
}
}
}
}
-
Добавьте созданный React.js компонент к коду React.js приложения - файлу "ClientApp/src/AppRoutes.js".
Вот JavaScript код файла "App.js" после обновления:
import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { TwainScanningDemo } from './components/TwainScanningDemo';
import './custom.css'
export default class App extends Component {
static displayName = App.name;
render() {
return (
<Layout>
<Route exact path='/' component={TwainScanningDemo} />
</Layout>
);
}
}
-
Запустите ASP.NET Core Web приложение с React.js и посмотрите результат.
Если VintaSoft Web TWAIN сервис не установлен на Вашем компьютере (Вы увидите сообщение об ошибке), Вам нужно выполнить следующие действия:
- нажмите на ссылку "Загрузить инсталлятор VintaSoft Web TWAIN сервиса"
- загрузите инсталлятор VintaSoft Web TWAIN сервиса на Ваш компьютер
- установите VintaSoft Web TWAIN сервис на Ваш компьютер
- обновите страницу приложения в браузере