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 г.