开发适用于桌面和 Web 的 Node.js 条码和 QR 码阅读器-控件新闻-慧都网

开发适用于桌面和 Web 的 Node.js 条码和 QR 码阅读器

精华|行业资讯|编辑：胡涛|2023-11-02 11:53:32.197|阅读 87 次

概述：在本文中，您将了解如何使用基于Dynamsoft C++ Barcode SDK的 Node.js 条形码和 QR 码插件来使用 JavaScript 构建桌面和 Web 应用程序。

有许多开源 JavaScript 条形码和 QR 码阅读器库，但适合企业使用的很少。原因是他们没有长期算法更新和维护的路线图。另外，纯JavaScript的性能也不够好。如果您追求性能，与纯 JavaScript 相比，WebAssembly 是更好的选择。尽管如此，对于使用 Node.js 进行服务器端编程来说，这还没有结束。Node.js 的底层是什么？它是C/C++。毫无疑问，使用 C++ 的 Node.js 插件具有最佳性能。在本文中，您将了解如何使用基于Dynamsoft C++ Barcode SDK的 Node.js 条形码和 QR 码插件来使用 JavaScript 构建桌面和 Web 应用程序。

Dynamsoft Barcode Reader 最新下载

安装

该barcode4nodejs包是一个基于Dynamsoft Barcode Reader构建的 Node.js 插件。我们用它来扫描条形码和二维码。

自定义 Node.js API 以读取条形码和 QR 码

目前，该barcode4nodejs软件包仅支持 Dynamsoft Barcode Reader 的部分 C++ API。如果功能无法满足您的需求，您可以按照以下步骤定制JavaScript API：

获取barcode4nodejs的源代码。
git clone https://github.com/Dynamsoft/nodejs-barcode
下载Dynamsoft C++ 条码 SDK。将头文件复制到该src文件夹，并将共享库复制到platforms该文件夹。Dynamsoft 条码读取器 SDK 支持Windows、Linux (AMD64 and ARM64)和macOS。理论上，Node.js 插件可以在所有桌面平台上运行。
编辑src/dbr.cc并index.js添加自定义功能。
构建 Node.js 扩展： node-gyp configure node-gyp build

在 5 分钟内构建适用于桌面和 Web 的 Node.js 条形码和 QR 码阅读器

Node.js 桌面应用程序

创建一个desktop.js文件。根据的基础教程opencv4nodejs，我们可以使用无限循环来捕获网络摄像头帧并将其显示在桌面窗口中：

const cv = require('opencv4nodejs');
const vCap = new cv.VideoCapture(0);
const delay = 10;
while (true) {
let frame = vCap.read();
if (frame.empty) {
vCap.reset();
frame = vCap.read();
}

cv.imshow('OpenCV Node.js', frame);
const key = cv.waitKey(delay); // Press ESC to quit
if (key == 27) {break;}
}

但是，如果我们在循环中不断调用异步函数来解码二维码和条形码，结果回调函数将永远不会返回。setTimeout()解决方法是在检测到条形码和二维码时继续调用函数：

const dbr = require('barcode4nodejs');
const cv = require('opencv4nodejs');
dbr.initLicense("DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==")
barcodeTypes = dbr.barcodeTypes
const vCap = new cv.VideoCapture(0);
const drawParams = { color: new cv.Vec(0, 255, 0), thickness: 2 }
const fontFace = cv.FONT_HERSHEY_SIMPLEX;
const fontScale = 0.5;
const textColor = new cv.Vec(255, 0, 0);
const thickness = 2;

results = null;

function getframe() {
let img = vCap.read();
dbr.decodeBufferAsync(img.getData(), img.cols, img.rows, img.step, barcodeTypes, function (err, msg) {
results = msg
}, "", 1);
cv.imshow('Webcam', img);
const key = cv.waitKey(10); // Press ESC to quit
if (key != 27) {
setTimeout(getframe, 30);
}
}

getframe()

在下面的代码中，我们使用 OpenCV API 绘制叠加层，显示检测到的条形码和二维码的文本和边框。由于相邻帧的相似性，我们不需要同步绘制帧及其对应的结果。一点点延迟是可以接受的。

if (results != null) {
for (index in results) {
let result = results[index];

let upperLeft = new cv.Point(result.x1, result.y1);
let bottomLeft = new cv.Point(result.x2, result.y2);
let upperRight = new cv.Point(result.x3, result.y3);
let bottomRight = new cv.Point(result.x4, result.y4);

img.drawLine(upperLeft, bottomLeft, drawParams);
img.drawLine(bottomLeft, upperRight, drawParams);
img.drawLine(upperRight, bottomRight, drawParams);
img.drawLine(bottomRight, upperLeft, drawParams);

img.putText(result.value, new cv.Point(result.x1, result.y1 + 10), fontFace, fontScale, textColor, thickness);
}
}

带网络摄像头的 OpenCV Node.js 条码和 QR 码读取器

Node.js Web 应用程序

创建一个web.js文件，在其中添加以下代码来启动 Web 服务器：

var fs=require("fs");
var html = fs.readFileSync("index.htm", "utf8");

var server = http.createServer(function (req, res) {
if (req.url.startsWith("/image")) {
res.writeHead(200, { 'Content-Type': 'image/jpeg' });
res.write(img);
res.end();
}
else {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.write(html);
res.end();
}
});

server.listen(2020);

console.log('Node.js web server is running at port 2020...')

将中使用的代码复制desktop.js到web.js. 我们不使用cv.imshow()在桌面窗口中显示网络摄像头图像，而是使用res.write()将图像数据发送到网络客户端。

下一步是创建一个 HTML 页面来显示图像数据：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webcam</title>
</head>

<body>
<img id="image" width="960" />

<script type="text/javascript">
var image = document.getElementById('image');
function refresh() {
image.src = "/image?" + new Date().getTime();
image.onload= function(){
setTimeout(refresh, 30);
}
}

refresh();
</script>

</body>
</html>

没有使用高级 HTML5 API，而是使用图像元素。因此，Web 应用程序与任何 Web 浏览器 100% 兼容。

现在我们可以使用 Node.js 运行服务器端条形码和二维码扫描应用程序。

node web.js

这是Microsoft Internet Explorer的屏幕截图。

OpenCV Node.js 网页条码和 QR 码