51电影网,老司机影院,区三区成人精品

国产凹凸在线-国产拗女一区二区三区-国产白白视-国产白领-国产白拍-国产白丝jk被疯狂输-国产白丝喷-国产白丝在线

開發適用于桌面和 Web 的 Node.js 條碼和 QR 碼閱讀器

精華|行業資訊|編輯：胡濤|2023-11-02 11:53:32.197|閱讀 95 次

概述：在本文中，您將了解如何使用基于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 //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 碼