Dynamsoft WebAssembly條形碼SDK預覽

時間 2019-11-11

標籤 dynamsoft webassembly 條形碼 sdk 預覽简体版

原文原文鏈接

WebAssembly（Wasm）是一種用於Web開發的革命性技術。它讓運行在Web瀏覽器中的前端應用擁有媲美原生應用的速度。使用WebAssembly，能夠方便地把C / C ++代碼移植到Web前端，經過JavaScript調用。Dynamsoft最近即將推出用於Web前端開發的WebAssembly條形碼SDK。前端

瀏覽器兼容性

支持的瀏覽器包括Firefox, Chrome, Edge, Safari, Opera。在MDN上能夠找到兼容性數據。
git

測試環境

Chrome Version 67.0.3396.99
IIS
Windows 10

License

使用SDK以前，須要先申請一個有效的License。試用License免費。github

WebAssembly條形碼SDK

參數初始化

配置參數。替換有效的license。web

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) {

};

設完參數後，在HTML頁面的最後添加dynamsoft.barcodereader.min.js。瀏覽器

加載.wasm文件

打開網頁的時候會花一些時間加載dynamsoft.barcodereader.wasm文件。
緩存

使用IndexedDB緩存.wasm文件

.wasm文件以後會被緩存在IndexedDB中。下一次優先從緩存讀取。
ide

網頁中讀取條形碼

SDK提供了4種接口用於讀取不一樣的輸入源。測試

function decodeFileInMemery(FileName)
function decodeVideo(HTMLVideoElement)
function decodeBase64String(String)
function decodeBuffer(Blob | ArrayBuffer | Uint8Array)

從文件讀取：spa

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讀取：3d

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中讀取一個或多個條形碼：

在手機Chrome中使用：

若有其它問題，能夠聯繫cnsupport@damingsoft.com。