Привет, меня зовут Зейн, и я занимаюсь разработкой приложений 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