三级片网站大全,国产高清网站,福利视频午夜

Dynamsoft Barcode Reader教程：HTML5中的移動QR碼掃描儀

翻譯|使用教程|編輯：楊鵬連|2021-03-10 11:17:26.037|閱讀 515 次

概述：Dynamsoft條碼讀取器（DBR）對QR碼有很好的支持。自2017年5月25日起具有JavaScript軟件包。使用DBR創建移動QR碼掃描儀很容易，它可以高效，準確地進行解碼。

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

點擊下載Dynamsoft Barcode Reader最新版

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

Dynamsoft條碼讀取器（DBR）對QR碼有很好的支持。自2017年5月25日起具有JavaScript軟件包。使用DBR創建移動QR碼掃描儀很容易，它可以高效，準確地進行解碼。由于它是HTML5格式，因此用戶無需下載和安裝應用程序，并且將其集成到不同平臺上的應用程序也很方便。

這里是一個不折不扣的現成在線HTML5的移動演示這里。它可以用相機掃描或從本地圖像庫中讀取。它僅在客戶端運行。

創建自己的移動掃描儀很簡單。GitHub上有很多示例。一些示例演示了如何將DBR與Vue，React和Angular結合使用。有些被設計為PWA或混合應用程序。您可以從基本版本開始：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>

JavaScript：

// 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;
    }
});

掃描儀的用戶界面定義為dist/dbr.scanner.html2：

您可以將其內容復制到HTML文件中，對其進行自定義并使用以下代碼行加載：

scanner.setUIElement(scannerElement);

運行時設置

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

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

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

還有另一種更改運行時設置的方法：initRuntimeSettingsWithString。

我們可以創建一個JSON模板，如下所示：

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

然后使用以下代碼加載它（模板可以存儲在例如textarea中）：

await scanner.initRuntimeSettingsWithString(templateString);

請注意，initRuntimeSettingsWithString僅在完整版中可用，而updateRuntimeSettings在精簡版和完整版中均可使用（精簡版和完整版之間的差異）。要啟用全部功能，請將_bUseFullFeature屬性設置為true：

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

DBR JS有四個內置的模板：speed，balance，coverage和single。speed如果您想進行實時掃描，則該模板非常合適。但是，如果有許多要解碼的QR碼或圖像復雜，則可能會錯過其中的一些。然后，coverage模板是一個更好的選擇，盡管它需要更多的時間進行計算。該balance模板同時考慮了速度和覆蓋范圍。該single模板經過優化，可掃描一個條形碼。要使用內置模板之一，請使用以下代碼：

await scanner.updateRuntimeSettings("speed");

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

特殊QR碼案例的設置

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

?®????????o???′? ?

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

但是在某些情況下，QR碼不完整或變形。可以在塑料袋，撕開的收據等上看到這些類型的代碼。DBR具有內置的代碼補充和抗變形算法，以恢復這些QR代碼（在第1條和第2條中進行了說明）。

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

????®???′???QR? ?

{
    "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參數。

?????￠???QR? ?

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

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