Dynamsoft Barcode Reader SDK一款多功能的條碼讀取控件，只需要幾行代碼就可以將條碼讀取功能嵌入到Web或桌面應(yīng)用程序。這可以節(jié)省數(shù)月的開發(fā)時(shí)間和成本。能支持多種圖像文件格式以及從攝像機(jī)或掃描儀獲取的DIB格式。使用Dynamsoft Barcode Reader SDK，你可以創(chuàng)建強(qiáng)大且實(shí)用的條形碼掃描儀軟件，以滿足你的業(yè)務(wù)需求。

點(diǎn)擊下載Dynamsoft Barcode Reader最新版

最初是為汽車行業(yè)1設(shè)計(jì)的，QR碼（縮寫為快速響應(yīng)代碼）已在各種使用場景中流行。從網(wǎng)站URL到很小的圖像，QR碼都可以編碼比一維條形碼更豐富的內(nèi)容。它們可以顯示在屏幕上，也可以打印在海報(bào)，包裝盒等上。人們可以輕松地用手機(jī)掃描它們。

這里是一個(gè)不折不扣的現(xiàn)成在線HTML5的移動(dòng)演示這里。它可以用相機(jī)掃描或從本地圖像庫中讀取。它僅在客戶端運(yùn)行。

創(chuàng)建自己的移動(dòng)掃描儀很簡單。GitHub上有很多示例。一些示例演示了如何將DBR與Vue，React和Angular結(jié)合使用。有些被設(shè)計(jì)為PWA或混合應(yīng)用程序。您可以從基本版本開始：helloworld.html。

QR碼掃描儀的Helloworld示例

它首先通過加載其js文件來加載DBR。

<!-- Please visit //www.dynamsoft.com/customer/license/trialLicense to get a trial license. -->
<script src="http://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.3/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>

HTML：

Choose image(s) to decode:
<input id="ipt-file" type="file" multiple accept="image/png,image/jpeg,image/bmp,image/gif">
<br><br>
<button id="btn-show-scanner">show scanner</button>

// reader for decoding picture
let reader = null;
// scanner for decoding video
let scanner = null;

// decode input picture
document.getElementById('ipt-file').addEventListener('change', async function(){
    try{
        reader = reader || await Dynamsoft.DBR.BarcodeReader.createInstance();
        let resultsToAlert = [];
        for(let i = 0; i < this.files.length; ++i){
            let file = this.files[i];
            resultsToAlert.push(i + '. ' + file.name + ":");
            let results = await reader.decode(file);
            console.log(results);
            for(let result of results){
                resultsToAlert.push(result.barcodeText);
            }
        }
        alert(resultsToAlert.join('\n'));
    }catch(ex){
        alert(ex.message);
        throw ex;
    }
    this.value = '';
});

// decode video from camera
document.getElementById('btn-show-scanner').addEventListener('click', async () => {
    try{
        scanner = scanner || await Dynamsoft.DBR.BarcodeScanner.createInstance();
        scanner.onFrameRead = results => {
            if(results.length){
                console.log(results);
            }
        };
        scanner.onUnduplicatedRead = (txt, result) => {
            alert(result.barcodeFormatString + ': ' + txt);
        };
        await scanner.show();
    }catch(ex){
        alert(ex.message);
        throw ex;
    }
});

您可以將其內(nèi)容復(fù)制到HTML文件中，對其進(jìn)行自定義并使用以下代碼行加載：

scanner.setUIElement(scannerElement);

運(yùn)行時(shí)設(shè)置

您可以針對不同方案修改運(yùn)行時(shí)設(shè)置3。例如，如果我們只想掃描一個(gè)QR碼，則可以使用以下updateRuntimeSettings方法修改設(shè)置：

let settings = await scanner.getRuntimeSettings();
settings.expectedBarcodesCount=1;
settings.barcodeFormatIds=Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
await scanner.updateRuntimeSettings(settings);

通過使用這些設(shè)置，將僅識(shí)別QR碼。這也將提高解碼速度。解碼速度對于實(shí)時(shí)視頻流掃描非常重要。

還有另一種更改運(yùn)行時(shí)設(shè)置的方法：initRuntimeSettingsWithString。

我們可以創(chuàng)建一個(gè)JSON模板，如下所示：

{
    "Version":"3.0",
    "ImageParameter": 
    {
        "Name": "default",
        "ExpectedBarcodesCount": 1,
        "BarcodeFormatIds": [ "BF_QR_CODE" ]
    }
}

await scanner.initRuntimeSettingsWithString(templateString);

Dynamsoft.DBR.BarcodeReader._bUseFullFeature = true; // Control of loading min wasm or full wasm.

await scanner.updateRuntimeSettings("speed");

您可以為自己的用例創(chuàng)建自己的模板。我們的在線演示可方便地試用合適的參數(shù)。

特殊QR碼案例的設(shè)置

通常，我們要掃描的QR碼是一個(gè)干凈的黑白矩陣，如下所示。DBR可以輕松閱讀它。

讀取大量QR碼也沒有問題。

但是在某些情況下，QR碼不完整或變形?？梢栽谒芰洗?，撕開的收據(jù)等上看到這些類型的代碼。DBR具有內(nèi)置的代碼補(bǔ)充和抗變形算法，以恢復(fù)這些QR代碼（在第1條和第2條中進(jìn)行了說明）。

對于以下不完整的QR碼，我們可以將BarcodeComplementModes參數(shù)添加到模板中以成功執(zhí)行解碼。

{
    "Version":"3.0",
    "ImageParameter": 
    {
        "Name": "default",
        "ExpectedBarcodesCount": 1,
        "MaxAlgorithmThreadCount": 4,
        "BarcodeFormatIds": [ "BF_QR_CODE" ],
        "BarcodeComplementModes": [
          {
            "Mode": "BCM_SKIP"
          },
          {
            "LibraryFileName": "",
            "LibraryParameters": "",
            "Mode": "BCM_GENERAL"
          }
        ]
    }
}

對于以下變形的QR碼，我們可以在模板中包含DeformationResistingModes參數(shù)。

{
    "Version":"3.0",
    "ImageParameter": 
    {
        "Name": "default",
        "ExpectedBarcodesCount": 1,
        "MaxAlgorithmThreadCount": 4,
        "BarcodeFormatIds": [ "BF_QR_CODE" ],
        "DeformationResistingModes": [
          {
            "Mode": "DRM_SKIP"
          },
          {
            "Level": 5,
            "LibraryFileName": "",
            "LibraryParameters": "",
            "Mode": "DRM_GENERAL"
          }
        ]
    }
}

let settings = await scanner.getRuntimeSettings();
/*
 * 1 means true
 * Using a percentage is easier
 * The following code shrinks the decoding region by 25% on all sides
 */
settings.region.regionMeasuredByPercentage = 1;
settings.region.regionLeft = 25;
settings.region.regionTop = 25;
settings.region.regionRight = 75;
settings.region.regionBottom = 75;
await scanner.updateRuntimeSettings(settings);

取景器矩形將出現(xiàn)在視頻流上方，然后用戶可以將QR碼放在矩形中以進(jìn)行讀取。這也將提高讀取速度。