Dynamsoft Barcode Reader教程：HTML5中的移动QR码扫描仪-控件新闻-慧都网

Dynamsoft Barcode Reader教程：HTML5中的移动QR码扫描仪

翻译|使用教程|编辑：杨鹏连|2021-03-10 11:17:26.037|阅读 421 次

概述：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="//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可以轻松阅读它。

ç®åçäºç»´ç

读取大量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码放在矩形中以进行读取。这也将提高读取速度。