Dynamsoft JavaScript barcode SDK совместим со всеми основными веб-фреймворками и веб-браузерами. В этой статье описаны шаги по созданию приложений для сканера штрих-кодов и QR-кодов Angular с помощью Dynamsoft JavaScript barcode SDK.
Среда разработки
- Node.js
- Angular CLI v13.3.7
Чтобы сразу приступить к работе, вы можете посетить онлайн-проект, созданный на StackBlitz, который является хорошим местом для редактирования и тестирования кода Angular в браузере.
Шаги по созданию приложения Angular для сканирования штрих-кода и QR-кода
Dynamsoft JavaScript barcode SDK предоставляет два основных класса: BarcodeReader и BarcodeScanner . Класс BarcodeReader поддерживает считывание штрих-кода и QR-кода со статических изображений, а класс BarcodeScanner поддерживает сканирование штрих-кода и QR-кода с видео в реальном времени. Поэтому в нашем приложении Angular мы создадим две страницы, чтобы продемонстрировать их функциональность соответственно.
Как сканировать документы с принтера на компьютер
Создание и настройка проекта Angular
Создадим новый проект Angular под названием angular-barcode-qr-code-scanner в терминале:
ng new angular-barcode-qr-code-scanner
Войдите в полноэкранный режим Выйдите из полноэкранного режима
Затем установите Dynamsoft JavaScript barcode SDK с помощью команды npm:
npm i dynamsoft-javascript-barcode
Войти в полноэкранный режим Выйти из полноэкранного режима
Для работы JS barcode SDK некоторые файлы ресурсов ( *.js , *.wasm ) должны быть скопированы в папку assets . Откроем файл angular.json для добавления конфигурации.
Войти в полноэкранный режим Выйти из полноэкранного режима
Кроме того, в коде TypeScript необходимо указать путь к ресурсам. Мы создаем файл products.ts , чтобы глобально задать лицензионный ключ и путь к ресурсам.
import BarcodeReader > from ‘dynamsoft-javascript-barcode’; BarcodeReader.license = ‘DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==’; BarcodeReader.engineResourcePath = ‘assets/dynamsoft-javascript-barcode/’; export interface Product id: string; name: string; description: string; > export const products = [ id: ‘reader’, name: ‘Barcode and QR Code Reader’, description: ‘Scan barcode and QR code from image files’, >, id: ‘scanner’, name: ‘Barcode and QR Code Scanner’, description: ‘Scan barcode and QR code from camera stream’, >, ];
Вход в полноэкранный режим Выход из полноэкранного режима
Массив products будет использоваться для создания компонентов Angular позже.
Создание списка компонентов и добавление навигации
В этом разделе мы создадим домашнюю страницу, содержащую верхнюю панель и список компонентов.
-
Создайте компонент top-bar:
ng generate component top-bar
class=»container»>
[routerLink]=»[‘/’]»> Dynamsoft Barcode Reader and Scanner
-
Создайте компонент списка продуктов:
ng generate component product-list
Examples *ngFor=»let product of products»> *ngIf=»product.id === ‘reader’; else elseBlock»> [title]=»product.name + ‘ details'» [routerLink]=»[‘/barcode-reader’]» >> > #elseBlock > [title]=»product.name + ‘ details'» [routerLink]=»[‘/barcode-scanner’]» >> > > *ngIf=»product.description»>Description: >
import ProductListComponent > from ‘./product-list/product-list.component’; import BarcodeReaderComponent > from ‘./barcode-reader/barcode-reader.component’; import BarcodeScannerComponent > from ‘./barcode-scanner/barcode-scanner.component’; const routes: Routes = [ path: », component: ProductListComponent >, path: ‘barcode-reader’, component: BarcodeReaderComponent >, path: ‘barcode-scanner’, component: BarcodeScannerComponent >, ];
Компонент ProductListComponent настроен как домашняя страница. Мы создадим BarcodeReaderComponent и BarcodeScannerComponent в следующих параграфах.
Создание компонента считывателя штрихкодов
- Создайте компонент barcode-reader .
ng generate component barcode-reader
id=»loading-status» style=»font-size:x-large» [hidden]=»isLoaded» >Loading Library.
> /> type=»file» id=»file» accept=»image/*» (change)=»onChange($event)» /> id=»result»> id=»imageview»> id=»image» /> id=»overlay»>
onChange(event: Event) const element = event.
currentTarget as HTMLInputElement; let fileList: FileList | null = element.files; if (fileList) let file = fileList.
item(0) as any; if (file) let fr = new FileReader(); fr.onload = (event: any) => let image = document.
getElementById(‘image’) as HTMLImageElement; if (image) image.src = event.target.result; const img = new Image(); img.
onload = (event: any) => this.updateOverlay(img.width, img.height); if (this.reader) this.reader.decode(file).
then((results: any) => console.log(results); let txts: any = []; let elem = document.getElementById(‘result’); try let localization; if (results.
length > 0) for (var i = 0; i results.length; ++i) txts.push(results[i].barcodeText); localization = results[i].localizationResult; this.
drawOverlay( localization, results[i].barcodeText ); > if (elem) elem.innerHTML = txts.join(‘, ‘); > > else if (elem) elem.innerHTML = txts.
join(‘, ‘); > > > catch (e) alert(e); > >); > >; img.src = event.target.result; > >; fr.readAsDataURL(file); > > >
Создание компонента сканера штрих-кода
- Создайте компонент barcode-scanner :
ng generate component barcode-scanner
id=»loading-status» style=»font-size:x-large» [hidden]=»isLoaded» >Loading Library. > /> class=»select»> for=»videoSource»>Video source: id=»videoSource» (change)=»openCamera()»> id=»videoview»> class=»dce-video-container» id=»videoContainer»> id=»overlay»>
Как сделать приложение для сканирования?
Поиск по экрану Google: Google Screen Search позволяет потребителям мгновенно сканировать QR-коды без приложения. Все, что нужно сделать, это навести камеру на QR-код, нажать и удерживать кнопку «Домой» и нажать «Что у меня на экране?» «Потребителям будет доступна ссылка на QR-код.
Могу ли я использовать свой телефон в качестве сканера штрих-кода?
Ваше устройство Android может сканировать любой штрих-код или QR-код с помощью бесплатное приложение из Play Store. После установки приложения для сканирования штрих-кода камеру вашего устройства можно использовать в качестве сканера. Затем вы можете выполнять различные действия в зависимости от содержимого штрих-кода.
Как использовать приложение для сканирования QR-кодов?
- На совместимом телефоне или планшете Android откройте встроенное приложение камеры.
- Наведите камеру на QR-код.
- Коснитесь баннера, который появляется на вашем телефоне или планшете Android.
- Следуйте инструкциям на экране, чтобы завершить вход.
Могу ли я сгенерировать собственный штрих-код?
Для создания штрих-кода
Выберите тип штрих-кода: EAN-13, UPC-A, Code 39 или ITF. Введите информацию о категории продукта в поле данных штрих-кода. Щелкните поле заголовка штрих-кода и заметку о штрих-коде, если вы хотите добавить их в штрих-код. Добавьте название штрих-кода в поле заголовка и дополнительные сведения в поле для заметок.
Сколько стоит система штрих-кода?
Для базовой системы штрих-кода это обычно будет стоить менее 1000 долларов США для полной настройки и установить. Это будет включать оборудование, принтер для создания этикеток со штрих-кодом и программное обеспечение, необходимое для отслеживания всего.
Можете ли вы создать свой собственный QR-код?
Если у вас есть устройство Android, вы можете создавать свои собственные QR-коды с помощью приложение под названием QR Code Generator, и его можно загрузить бесплатно. . Введите адрес электронной почты (или любую другую информацию, которую вам нужно ввести на основе создаваемого QR-кода), а затем нажмите «Создать» в правом верхнем углу.
Как работают приложения со штрих-кодом?
Что делает приложение сканера штрих-кода? Сканер штрих-кода собирает информацию о продукте, сканируя полосатый код, обычно расположенный на обратной стороне продукта. Используя устройство iPhone или Android, приложение сканера считывает изображение штрих-кода, извлекая такую информацию, как название продукта, цена, товарный запас (SKU) и т. Д.
Как связать QR-код с приложением?
- Отправляйтесь в Scanova.
- В категориях QR-кодов выберите QR-код App Store.
- Затем вставьте ссылки вашего приложения в соответствующие поля.
- После того, как вы введете все ссылки, нажмите «Продолжить».
- Появится окно с предложением назвать QR-код.
Есть ли в iPhone встроенный QR-сканер?
На iPhone с iOS 11 и более поздних версий есть встроенный QR Сканер кода, доступ к которому можно получить через собственное приложение камеры или панель управления. Чтобы просмотреть сканер QR-кода на iPhone, щелкните значок камеры и укажите на QR-код, чтобы просмотреть информацию.
Какой QR-сканер лучше?
- QR-сканер Касперского.
- NeoReader.
- QuickMark.
- Быстрое сканирование.
- Считыватель QR-кода от сканера.
- Сканировать.
- GammaPlay.
- QR Droid Private и QR Droid.
Как сканировать с помощью телефона?
- Откройте приложение Google Диск.
- В правом нижнем углу нажмите «Добавить».
- Коснитесь Сканировать.
- Сделайте снимок документа, который хотите отсканировать. Настройте область сканирования: нажмите «Обрезать». Сделайте снимок еще раз: нажмите «Повторно сканировать текущую страницу». Сканировать другую страницу: нажмите «Добавить».
- Чтобы сохранить готовый документ, нажмите Готово.
Источник: ch-pik.ru
Как сделать программу сканер
В народе довольно популярны приложения, умеющие сканировать штрих коды и QR-коды на различных вещах и продуктах и выдающие о них необходимую полезную информацию. В сегодняшнем уроке мы сделаем свое собственное приложение, способное работать с этими замысловатыми кодами. Но наше приложение не будет полностью работающим сканером, написанным лично нами, мы сделаем всего лишь приложение, которое будет использовать для анализа кодов известное на Play Market приложение под названием Barcode Scanner (бесплатное). Наше приложение будет с помощью намерения Intent запускать это упомянутое выше приложение, там будет происходить анализ необходимого кода, а результат анализа будет передаваться назад нашему приложению с помощью метода OnActivityResult, а затем высвечиваться уже в нашем приложении с помощью всплывающего Toast сообщения.
Для начала создаем новый проект, выбираем Blank Activity.
Первым делом создадим пользовательский интерфейс приложения. Он будет состоять из двух кнопок для запуска сканеров штрих кода и QR-кода. При нажатии на кнопки пользователю будет предложено загрузить приложение Barcode Scanner с маркета. Открываем файл activity_main.xml и добавляем туда следующие элементы:
Теперь переходим к работе с кодом. В принципе, ничего нового мы здесь не увидим, все довольно знакомое. Переход на другое приложение с помощью Intent, выполнение alert dialog для предложения пользователю перейти на Play Market для загрузки сканера, метод для обработки результатов программы сканера и получения данных с него OnActivityResult и их вывод в Toast сообщении.
Открываем файл MainActivity.java и добавляем в него следующий, довольно понятный код:
Вот и все, на этом наш сканер готов. Запускаем и проверяем:
Переход выполнен, загружаем ПО:
Источник: learn-android.ru