WebAssembly (Wasm) — революционная технология для веб-разработки. Он предназначен для выполнения на исходной скорости в веб-браузерах. С помощью WebAssembly удобно портировать код C/C++ для веб-клиента и серверных приложений. Dynamsoft Barcode Reader 6.2 — это самый мощный SDK для штрих-кодов, и его версия WebAssembly находится в разработке. Давайте посмотрим, что мы можем сделать с предварительной версией пакета SDK для штрих-кодов Dynamsoft WebAssembly.
Совместимость с браузером
Посетите MDN, чтобы проверить совместимость браузера.
Среда тестирования
- Версия Chrome 67.0.3396.99
- ИИС
- Windows 10
Лицензия
Чтобы использовать SDK, подайте заявку на получение действующей лицензии заранее.
SDK штрих-кода WebAssembly
Инициализация параметров
Настройте параметры. Замените лицензионный ключ на свой.
var
dynamsoft = self.dynamsoft || {};
var
reader;
dynamsoft.dbrEnv = dynamsoft.dbrEnv || {};
dynamsoft.dbrEnv.resourcesPath = "https://tst.dynamsoft.com/demo/DBR_WASM";
dynamsoft.dbrEnv.licenseKey = "t0068NQAAAFEiYhAfkotGqCdX6THMV7KARQKp5h14F7LrM4LoGND9F5AdXykh+TOYHnBnMw80FMeKjMJbieYYos5dYLSn/Do=";
dynamsoft.dbrEnv.onAutoLoadWasmSuccess = function
() {
reader = new
dynamsoft.BarcodeReader();
};
dynamsoft.dbrEnv.onAutoLoadWasmError = function
(status) {
};
После настройки параметров добавьте dynamsoft.barcodereader.min.js внизу HTML-страницы.
<script src="https://tst.dynamsoft.com/demo/DBR_WASM/dynamsoft.barcodereader.min.js"></script>
Загрузка файла .wasm
Загрузка файла dynamsoft.barcodereader.wasm занимает некоторое время.
Кэширование с помощью IndexedDB
Файл .wasm будет кэширован в IndexedDB. Когда вы обновляете или открываете страницу в следующий раз, скорость загрузки увеличивается.
Чтение штрих-кодов
С помощью SDK для штрих-кодов Dynamsoft WebAssembly вы можете обнаруживать штрих-коды из разных источников ввода. Вот доступные методы:
function
decodeFileInMemery(FileName)
function
decodeVideo(HTMLVideoElement)
function
decodeBase64String(String)
function
decodeBuffer(Blob | ArrayBuffer | Uint8Array)
Чтение файла изображения, загруженного с помощью HTML-тега ‹input›.
let image = document.getElementById('uploadImage').files[0];
if
(image) {
reader.decodeFileInMemery(image).then(results => {
let txts = [];
for
(let i = 0; i < results.length; ++i) {
txts.push(results[i].BarcodeText);
}
barcode_result.textContent = txts.join(", ");
});
}
Визуализируйте видеокадры на холсте и используйте соответствующий ArrayBuffer для обнаружения штрих-кода.
var
imageData = barcodeContext.getImageData(0, 0, imageWidth, imageHeight);
var
idd = imageData.data;
reader.decodeBuffer(idd.buffer, imageWidth, imageHeight, imageWidth * 4, dynamsoft.BarcodeReader.EnumImagePixelFormat.IPF_ARGB_8888).then(
results => {
let txts = [];
for
(var
i = 0; i < results.length; ++i) {
if
(results[i].LocalizationResult.ExtendedResultArray[0].Confidence >= 30) {
txts.push(results[i].BarcodeText);
}
}
}
);
Считайте один или несколько штрих-кодов в настольном Chrome:
Веб-приложение также совместимо с мобильными браузерами.
Для получения дополнительной информации о SDK штрих-кодов WebAssembly обращайтесь по адресу [email protected].
Исходный код
https://github.com/yushulx/webassembly-barcode-reader
Первоначально опубликовано на www.codepool.biz 16 июля 2018 г.