Привет, меня зовут Зейн, и я занимаюсь разработкой приложений React.js и React Native последние 3 года.

Я столкнулся с особым требованием, требующим прямого сканирования страницы из веб-приложения. При изучении решений для этой задачи оказалась преобладающей библиотекой JavaScript для этой задачи. Удивительно, но доступной документации и статей было недостаточно для плавной интеграции с моим приложением, что привело к нескольким проблемам. Приложив значительные усилия, я в конце концов преодолел эти препятствия.

В этой статье я предоставлю подробное руководство по настройке и внедрению scan.js. Вместе мы пройдем сложный процесс беспрепятственного включения функциональных возможностей физического сканера в ваше веб-приложение, обеспечив плавное и эффективное сканирование.

Ссылка на демонстрацию: http://asprise.com/scan/scannerjs/demo/scanner.js-demo.php?license=Enterprise_10Yrs

Вы можете перейти по этой ссылке и протестировать функциональность, прежде чем погрузиться в ее реализацию.

Ссылка на пакет NPM: https://www.npmjs.com/package/scanner-js

Я предполагаю, что ваше приложение React уже настроено и работает, давайте перейдем к следующим шагам в этой реализации.

Установка
npm install Scanner.js
или

пряжа добавить scan.js

До сих пор мы успешно устанавливали пакет, теперь пришло время включить CDN для scan.js, как указано в документации.

<script type="text/javascript" src="//cdn.asprise.com/scannerjs/scanner.js"></script>

Теперь создайте файл с именем scan.js и импортируйте его в свой файл app.js.

Откройте файл scan.js.

Сделайте простую кнопку, которая инициирует процесс сканирования:

<div>
    <button type="button" onClick={this.scan}>
       Scan
    </button>
 </div>

Теперь напишем код для функции сканирования:

scan = () => {
    window.scanner.scan(this.displayImagesOnPage, {
      "use_asprise_dialog": true, // Whether to use Asprise Scanning Dialog
      "show_scanner_ui": true, // Whether scanner UI should be shown
      "twain_cap_setting": { // Optional scanning settings
          "ICAP_PIXELTYPE": "TWPT_RGB" // Color
      },
      "output_settings": [{
          "type": "return-base64",
          "format": "jpg"
      }]
  });
};

В этой функции сканирования мы передаем функцию обратного вызова, которая будет выполняться, когда сканирование будет получено от сканера. Напишем и это:

displayImagesOnPage(successful, mesg, response) {
    if (!successful) {
      // On error
      console.error('Failed: ' + mesg);
      return;
    }
    if (
      successful &&
      mesg != null &&
      mesg.toLowerCase().indexOf('user cancel') >= 0
    ) {
      // User cancelled.
      console.info('User cancelled');
      return;
    }
    scannedImages = window.scanner.getScannedImages(response, true, false); // returns an array of ScannedImage
    console.log("Items ", scannedImages)
    for (
      var i = 0;
      scannedImages instanceof Array && i < scannedImages.length;
      i++
    ) {
      var scannedImage = scannedImages[i];
      var elementImg = window.scanner.createDomElementFromModel({
        name: 'img',
        attributes: {
          class: 'scanned',
          src: scannedImage.src,
        },
      });
    }
  }

Эта функция будет обрабатывать отсканированные изображения и создавать элементы DOM для автоматического отображения изображений с помощью функции createDomElementFromModel, предоставляемой сканером.

Вы также можете сохранить изображения в свой локальный каталог или показать их в соответствии с вашими требованиями.

Примечание. Если вы используете Google Chrome, вам необходимо установить клиент Asprise, чтобы это решение работало.

Удачного кодирования!

#TWAIN #Javascript #ASPRISE #веб-сканирование #Scanner.js #React.js