Dynamsoft JavaScript 条形码 SDK for Node.js and Web

肖玲

0/5 (0投票)

2019年5月15日

CPOL

5822

在本文中，我们将向您展示如何将条形码扫描功能集成到您的应用程序中。具体来说，我们将介绍两种支持 JavaScript 的环境：Node.js 和 Web。

下载相关文件 - 1.6 KB

Dynamsoft Barcode Reader JavaScript Edition 是一个基于 WebAssembly 技术构建的 JavaScript 条形码扫描库。它支持各种条形码的实时定位和解码。该库提供了丰富的 API，包括从静态图像读取条形码以及从实时视频流扫描条形码。它还具备一次扫描多个条形码的功能。JavaScript 条形码 SDK 与 Node.js 和 Web 100% 兼容，这意味着它适用于后端和前端开发。

在本文中，我们将向您展示如何将条形码扫描功能集成到您的应用程序中。具体来说，我们将介绍两种支持 JavaScript 的环境：Node.js 和 Web。

要开始使用，您需要下载 Dynamsoft JavaScript 条形码 SDK。您也可以在此下方下载本文提到的源代码。

下载我们的 SDK 后，您可以按照本文逐步演示的流程构建自己的条形码扫描应用程序。

Dynamsoft JavaScript 条形码 SDK 概述

许可证

获取免费 30 天试用许可证。试用许可证已预装在示例代码中。在文本编辑器中打开任何示例，试用许可证字符串包含在以下代码行中

BarcodeReader.licenseKey = "LICENSE-KEY"

环境

操作系统	浏览器	版本
Windows, Linux, MacOS, Android, iOS	Chrome	v57+
	Firefox	v52+
	Edge	v16+
	Safari*	v11+
	Internet Explorer	不支持

支持的条码符号体系

线性条码 (1D)：Code 39、Code 93、Code 128、Codabar、Interleaved 2 of 5、EAN-8、EAN-13、UPC-A、UPC-E、Industrial 2 of 5。

2D 条码：QR Code、DataMatrix、PDF417 和 Aztec Code。

如何为 Node.js 开发使用 JavaScript 条形码 SDK

步骤 1：使用 npm 命令安装模块

> npm i dynamsoft-javascript-barcode

步骤 2：创建一个新的 app.js 文件并复制以下代码。

步骤 3：引入模块

var BarcodeReader = require('dynamsoft-javascript-barcode');

步骤 4：设置有效的许可证密钥

BarcodeReader.licenseKey = 'LICENSE-KEY';

步骤 5：实例化条形码读取器对象

BarcodeReader.createInstance().then(reader => {
});

createInstance() 函数将自动加载相关的 wasm 文件并返回一个已实例化的条形码读取器。如果您想手动控制加载步骤，请按如下方式更改代码

BarcodeReader.loadWasm().then(() => {
var reader = new BarcodeReader('');
});

步骤 6：从示例图像读取条形码

reader.decode('sample.png').then(results => {
for(var i = 0; i < results.length; ++i){
console.log(results[i].BarcodeText);
}
reader.deleteInstance();
});

JavaScript 条形码 SDK 提供了一个 .d.ts 文件，用于 Visual Studio Code 中的 IntelliSense。

步骤 7：在命令行工具中运行应用程序

node app.js

如何为 Web 开发使用 JavaScript 条形码 SDK

步骤 1：创建一个 index.html 文件。

步骤 2：加载 Dynamsoft JavaScript Barcode Reader SDK

<script src="https://demo.dynamsoft.com/dbr_wasm/js/dbr-6.5.1.min.js"></script>

步骤 3：设置有效的许可证密钥

BarcodeReader.licenseKey = 'LICENSE-KEY';

步骤 4：创建并初始化条形码读取器对象

let scanner = new BarcodeReader.Scanner({
onFrameRead: results => {console.log(results);},
onNewCodeRead: (txt, result) => {alert(txt);}
});

步骤 5：使条形码读取器对象工作

scanner.open();

JS 代码在运行时创建的 BarcodeReader.Scanner 是一个视图容器，包括

用于显示 SDK 加载状态的 <p> 元素
用于播放相机实时流的 <video> 元素
用于切换摄像头的 <select> 元素
用于设置分辨率的 <select> 元素和一个用于关闭窗口的按钮

将 USB 网络摄像头连接到您的 PC。双击 index.html 在 Chrome 中运行 Web 条形码扫描器。

如何将 Dynamsoft JavaScript 条形码 SDK 部署到您的 Web 服务器

步骤 1：将 DBR-JS-6.5.1.zip 解压到一个文件夹。

步骤 2：将上面提到的 index.html 文件复制到根目录

步骤 3：将脚本路径更改为

<script src="dist/dbr-6.5.1.min.js"></script>

步骤 4 (a)：现在，如果您双击打开 index.html 文件，您将看到错误消息

要解决此问题，需要一个 Web 服务器。我们可以通过安装 Web Server for Chrome 来快速设置 Web 服务器。在 Chrome 的导航栏中，输入 chrome://apps 来运行 Web Server 应用程序。我们还需要选择一个文件夹。

步骤 4 (b)：要将文件部署到 IIS、Apache 或 Nginx，您必须在 Web 配置文件中声明 MIMEType。对于我们的示例，我们将使用 IIS。

注意：如果您只将项目物理路径设置为 IIS，则无法获取 wasm 文件。

解决方法是创建一个 web.config 文件，放在 wasm 的相同目录或父目录下方。

<?xml version="1.0" encoding="UTF-8"?>
    <configuration>
        <system.webServer>
            <staticContent>
                <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
            </staticContent>
        </system.webServer>
    </configuration>

如何使用低级 API

除了条形码扫描器容器，Dynamsoft JavaScript Barcode SDK 还提供了一些用于解码条形码的低级 API，例如 decode()、decodeBase64String()、decodeBuffer() 和 decodeVideo()。让我们看看如何使用 decode() 从磁盘文件读取条形码。

步骤 1：创建一个空文件并将其保存为 decodeFile.html

步骤 2：添加一个 <input> 元素用于加载磁盘文件

<input id="iptDecodeImg" type="file" accept="image/bmp,image/jpeg,image/png,image/gif">

步骤 3：包含 dbr-6.5.1.min.js

<script src="https://demo.dynamsoft.com/dbr_wasm/js/dbr-6.5.1.min.js"></script>

步骤 4：设置许可证并实例化条形码读取器对象

BarcodeReader.licenseKey = "LICENSE-KEY";

let reader;
BarcodeReader.createInstance().then(r => reader = r );

步骤 5：为 <input> 元素创建更改事件监听器。在事件触发时调用 decode() 方法

document.getElementById('iptDecodeImg').addEventListener('change', function(){
            if(!reader){return;}
            reader.decode(this.files[0]).then(results => {
                if (results.length > 0) {
                    console.log(results);
                    var txts = [];
                    for (var i = 0; i < results.length; ++i) {
                        txts.push(results[i].BarcodeText);
                    }
                    alert(txts.join("\n"));
                    this.value = '';
                }
                else
                {
                    alert("No barcode found.");
                    this.value = '';
                    }
            });
        });

下载 Dynamsoft JavaScript 条形码 SDK 并构建您的条形码扫描应用程序。

技术支持

如果您对以上示例代码或 Dynamsoft JavaScript Barcode SDK 有任何疑问，请随时通过 support@dynamsoft.com 与我们联系。

历史

v6.5.1, 2019/04/28：添加了 d.ts 文件以支持 TypeScript。为 Node.js 添加了 UMS/ESM 导出。添加了内置扫描器构造以支持视频设置。
v6.5, 2019/03/14：将库文件 (.WASM) 大小减小到约 2MB。将构建时间减少了 106%，并将解码时间提高了 98%。