Получение изображений со сканера изображений TWAIN/WIA/eSCL в приложении ASP.NET MVC 5
В этом разделе
В этом руководстве показано, как создать пустое приложение ASP.NET MVC5 в Visual Studio .NET 2019 и получить изображения со сканера изображений TWAIN/WIA/eSCL в Приложение ASP.NET MVC 5 для Windows.
Вот действия, которые необходимо выполнить:
-
Создайте пустое приложение ASP.NET MVC5.
Откройте Visual Studio .NET 2019 и создайте новый проект типа веб-приложения ASP.NET, а затем настройте проект для использования .NET Framework 4.7.2:
Выберите шаблон "Empty" для веб-приложения ASP.NET с поддержкой MVC:
-
Сторона сервера: Добавьте контроллер MVC по умолчанию в приложение ASP.NET MVC.
- При необходимости добавьте в проект папку "Controllers".
-
Правой кнопкой мыши нажмите на папку "Controllers" и выберите пункт "Add => Controller..." из контекстного меню
-
Выберите шаблон "MVC 5 Controller - Empty", задайте имя контроллера "DefaultController" и нажмите кнопку "Add"
-
Откройте файл "App_Start/RouteConfig.cs" и проверьте, что приложение ASP.NET MVC правильно регистрирует маршрут для контроллера MVC.
Вот исходные коды C# файла RouteConfig.cs:
using System.Web.Mvc;
using System.Web.Routing;
namespace WebApplication1
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}",
defaults: new { controller = "Default", action = "Index" }
);
}
}
}
-
Клиентская сторона: создание веб-представления для отображения изображения, полученного от сканера изображений TWAIN/WIA/eSCL.
-
Откройте файл "DefaultController.cs", нажмите правую кнопку мыши на методе "Index" класса DefaultController и выберите меню "Add View..." в контекстном меню
-
Установите имя представления на "Index", снимите флажок "Use a layout page" и нажмите кнопку "Add" => Будет создан файл "Views\Default\Index.cshtml"
-
Клиентская сторона: Добавьте установщик VintaSoft Web TWAIN сервиса в приложение ASP.NET MVC.
- Добавьте папку "Data" в папку проекта.
-
Загрузите ZIP-архив с Windows инсталлятором для VintaSoft Web TWAIN сервиса по ссылке
https://www.vintasoft.ru/zip/VintasoftWebTwainService-15.3.3.zip
и скопируйте ZIP-архив в папку "Data".
Сервис VintaSoft Web TWAIN - это служба Windows, предоставляющая веб-API для доступа к сканерам изображений TWAIN/WIA/eSCL всем пользователям локального компьютера. Подробнее о сервисе VintaSoft Web TWAIN можно узнать здесь:
здесь
.
-
Клиентская сторона: Добавьте в проект файлы Vintasoft JavaScript.
- Добавьте в проект папку "Scripts", если нужно.
-
Получите файлы Vintasoft.Shared.js и Vintasoft.Twain.js из папки "<SDK_install_path>\Bin\JavaScript\" установки VintaSoft TWAIN .NET SDK или из npm-пакета 'vintasoft-web-twain-js' (
https://www.npmjs.com/package/vintasoft-web-twain-js
). Скопируйте файлы Vintasoft JavaScript в папку "Scripts".
-
Откройте файл "Views\Default\Index.cshtml" и добавьте ссылки на файлы Vintasoft JavaScript в код страницы:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ASP.NET MVC TWAIN Demo</title>
<script src="~/Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
<script src="~/Scripts/Vintasoft.Twain.js" type="text/javascript"></script>
</head>
<body>
<div>
</div>
</body>
</html>
-
Клиентская сторона: Создайте разметку для отсканированного изображения на странице просмотра ASP.NET MVC.
Создайте "<input type="image">" для отсканированного изображения.
Откройте файл "Views\Default\Index.cshtml" и добавьте HTML код в файл:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ASP.NET MVC TWAIN Demo</title>
<script src="~/Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
<script src="~/Scripts/Vintasoft.Twain.js" type="text/javascript"></script>
</head>
<body>
<div style="text-align:center">
<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="/Data/VintasoftWebTwainService-15.3.3.zip" hidden>Download installer of VintaSoft Web TWAIN service</a>
</div>
</body>
</html>
-
Клиентская сторона: добавление кода JavaScript, который получает изображение от сканера изображений TWAIN/WIA/eSCL и отображает отсканированное изображение на странице.
Откройте файл "Views\Default\Index.cshtml" и добавьте JavaScript код в файл:
<script type="text/javascript">
// acquire images from TWAIN/WIA/eSCL image scanner
__acquireImageFromTwainScanner();
/**
* Acquires images from TWAIN/WIA/eSCL image 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 devices
var twainService = new Vintasoft.Shared.WebServiceControllerJS(serviceUrl);
// TWAIN 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 device
device = deviceManager.get_DefaultDevice();
// open device without UI
device.open(false);
// a collection that stores images, which are acquired from devices and stored in memory of VintaSoft Web TWAIN service
var acquiredImages = new Vintasoft.Twain.WebAcquiredImageCollectionJS(deviceManager);
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();
// add acquired image to the image collection
acquiredImages.add(acquiredImage);
// get image as Base64 string
var bitmapAsBase64String = acquiredImage.getAsBase64String();
// update image preview
var previewImageElement = document.getElementById('previewImage');
previewImageElement.src = bitmapAsBase64String;
// clear image collection (delete images from memory of VintaSoft Web TWAIN service) because image is not necessary anymore
acquiredImages.clear();
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();
}
}
</script>
-
Запустите приложение ASP.NET MVC 5 и посмотрите результат.
Запустите проект и посмотрите результат:
Если VintaSoft Web TWAIN сервис не установлен на Вашем компьютере (Вы увидите сообщение об ошибке), Вам нужно выполнить следующие действия:
- нажмите на ссылку "Загрузить инсталлятор VintaSoft Web TWAIN сервиса"
- загрузите инсталлятор VintaSoft Web TWAIN сервиса на Ваш компьютер
- установите VintaSoft Web TWAIN сервис на Ваш компьютер
- обновите страницу приложения в браузере