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

2021年1月7日上午9:17 • 软件教程

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码都可以编码比一维条形码更丰富的内容。它们可以显示在屏幕上，也可以打印在海，包装盒等上。人们可以轻松地用手机扫描它们。

QR码扫描仪的Helloworld示例它首先通过加载其js文件来加载DBR。<script src="https://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 picturelet reader = null;// scanner for decoding videolet scanner = null;// decode input picturedocument.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 cameradocument.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可以轻松阅读它。