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

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

准备工作

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

2. 安装Node.js依赖包。

   npm install barcode4nodejs express body-parser
   1

使用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}/`);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

通过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);
        
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13

使用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);
        });
1
2
3
4
5
6
7
8
9
10
11

鸿蒙应用开发步骤

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

{
  "module": {
    "name": "entry",
    ...
    "abilities": [
      ...
    ],
    "requestPermissions": [{"name": "ohos.permission.INTERNET"}]
  }
}
1
2
3
4
5
6
7
8
9
10

在工程的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 = undefined
  host: 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})
    }

  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

这里的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();
        }
        }
        );
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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 ArrayBuffer
            const imageSource = image.createImageSource(this.imageData);
            imageSource.createPixelMap().then(pixelmap => {
                this.displayImage = pixelmap;
            });
            }

        } else {
            console.info('error:' + JSON.stringify(err));
            httpRequest.off('headersReceive');
            httpRequest.destroy();
        }
        }
        );
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

最后我们测试一张包含多个二维码的图片：

源代码

https://gitee.com/yushulx/harmonyos-multi-barcode-qrcode-scan