鸿蒙HarmonyOS应用开发：多码识别

本文主要是介绍鸿蒙HarmonyOS应用开发：多码识别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

华为HMS Core的扫码接口更适用于简单的个人使用。在商业环境，如货架、医用试管、图书馆书架等，常常遇到复杂的多码扫描需求，这时需要专业的扫码SDK。尽管当前市场上的主流商业SDK尚未支持鸿蒙HarmonyOS，但我们仍可以通过HTTP请求来调用扫码服务，满足在鸿蒙系统上的多码扫描需求。

准备工作

申请一个Dynamsoft Barcode Reader免费试用序列号。

安装Node.js依赖包。

npm install barcode4nodejs express body-parser

使用Node.js搭建扫码服务

启动一个Express服务，监听3000端口，代码如下：

const express = require('express');
const path = require('path');
const fs = require('fs');
const app = express();
const http = require('http');
const server = http.createServer(app);
const bodyParser = require('body-parser');app.use(express.static('public'));
app.use('/node_modules', express.static(__dirname + '/node_modules'));
app.use(bodyParser.json({ limit: '50mb' }));
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));const port = process.env.PORT || 3000;server.listen(port, '0.0.0.0', () => {host = server.address().address;console.log(`Server running at http://0.0.0.0:${port}/`);
});

通过HTTP POST请求接收图片文件流：

app.post('/readbarcode', async (req, res) => {const data = req.body;let chunks = [];req.on('data', (chunk) => {chunks.push(chunk);});req.on('end', () => {let nodeBuffer = Buffer.concat(chunks);});
});

使用barcode4nodejs来实现服务端的扫码功能：

const dbr = require("barcode4nodejs")
dbr.initLicense("LICENSE-KEY")
dbr.decodeFileStreamAsync(nodeBuffer, nodeBuffer.length, dbr.formats.QRCode).then((results) => {let output = '';let index = 0;for (result of results) {output += index + ': ' + result['value'] + ' ';index += 1;}res.status(200).send(output);});

鸿蒙应用开发步骤

在entry/src/main/module.json5文件中配置网络权限ohos.permission.INTERNET：

{"module": {"name": "entry",..."abilities": [...],"requestPermissions": [{"name": "ohos.permission.INTERNET"}]}
}

在工程的rawfile目录中放入一张示例图片。

鸿蒙图片资源

程序启动的时候，我们把图片加载到内存中，用于显示以及后续的扫码请求。在entry/src/main/ets/pages/Index.ets中添加如下代码：

import http from '@ohos.net.http';
import image from '@ohos.multimedia.image';const context = getContext(this);
const resourceMgr = context.resourceManager;@Entry
@Component
struct Index {@State displayImage: any = undefined @State result: string = 'N/A'imageData: ArrayBuffer = undefinedhost: string = 'http://192.168.8.72:3000'text: string = 'https://devblogs.damingsoft.com/album/2023/10/multicode.jpg'onPageShow() {(async () => {const fileData = await resourceMgr.getRawFileContent('qrcode.jpg');this.imageData = fileData.buffer;const imageSource = image.createImageSource(this.imageData);imageSource.createPixelMap().then(pixelmap => {this.displayImage = pixelmap;});})();}build() {Scroll(this.scroller) {Column() {...Image(this.displayImage).width('100%').objectFit(ImageFit.Contain).margin({bottom: 5})Text(this.result).fontSize(16).textAlign(TextAlign.Start).fontWeight(FontWeight.Bold).backgroundColor(0xd2cab3)}.justifyContent(FlexAlign.Start).width('100%').height('100%').padding({left: 5, top: 5, right: 5, bottom: 5})}}
}

这里的host就是刚才启动的服务器地址。imageData是图片的二进制数据，displayImage是用于显示的PixelMap对象。result是扫码结果。

添加一个按钮来触发HTTP POST扫码请求：

Button('Read Multi QR Codes').backgroundColor('#007DFF').margin(15).onClick(() => {if (!this.imageData) return;let url = this.host + '/readbarcode'let httpRequest = http.createHttp();httpRequest.on('headersReceive', (header) => {console.info('header: ' + JSON.stringify(header));})httpRequest.request(url,{method: http.RequestMethod.POST,header: {'Content-Type': 'application/octet-stream'},extraData: this.imageData,}, (err, data) => {if (!err) {try {this.result = data.result.toString()} catch (error) {console.error("Error parsing JSON:", error);}} else {console.info('error:' + JSON.stringify(err));httpRequest.off('headersReceive');httpRequest.destroy();}});})

Content-Type设置成application/octet-stream，extraData设置成图片的二进制数据。

鸿蒙二维码识别

为了方便在模拟器里测试不同的图片，我们再创建一个输入框用来输入图片URL，然后通过HTTP GET请求来获取图片数据：

TextArea({placeholder: 'https://devblogs.damingsoft.com/album/2023/10/multicode.jpg',
}).placeholderFont({ size: 16, weight: 400 }).width(336).height(56).margin(20).fontSize(16).fontColor('#182431').backgroundColor('#FFFFFF').onChange((value: string) => {this.text = value})Button('Get an image').backgroundColor('#007DFF').margin(15).onClick(() => {let httpRequest = http.createHttp();httpRequest.on('headersReceive', (header) => {console.info('header: ' + JSON.stringify(header));})httpRequest.request(this.text,{method: http.RequestMethod.GET,}, (err, data) => {if (!err) {if (data.result instanceof ArrayBuffer) {this.imageData = data.result as ArrayBufferconst imageSource = image.createImageSource(this.imageData);imageSource.createPixelMap().then(pixelmap => {this.displayImage = pixelmap;});}} else {console.info('error:' + JSON.stringify(err));httpRequest.off('headersReceive');httpRequest.destroy();}});})