【HarmonyOS】Stage模型二维码/条码生成与解析

news/2024/4/28 16:22:33/文章来源:https://blog.csdn.net/Mayism123/article/details/131727708

HarmonyOS的官方API中提供了QRCode组件(QRCode-基础组件-组件参考(基于ArkTS的声明式开发范式)-ArkTS API参考-HarmonyOS应用开发),这个组件有个缺点只能用于显示二维码,无法显示条码与解析码内容,下面给大家介绍一个功能强大的三方库@ohos/zxing,效果如下。

cke_362.png

【开发步骤】

Gitee仓库中的示例代码很全,如果只是需要简单接入的话,可以精简一下代码。

一、引入三方库

首先,我们需要导入这个ohpm的组件库,可以参考demo中的命令行方式导入:

“ohpm install @ohos/zxing”

另一种方式是在oh-package.json5中配置,这边的版本选择的是2.0.0版本,配置如下:

 "dependencies": {"@ohos/zxing": "2.0.0"}

二、完成解析与生成相关代码

在src/main/ets目录下创建码解析与生成的工具类文件QRCode.ets

import {BarcodeFormat,MultiFormatWriter,BitMatrix,EncodeHintType,MultiFormatReader,DecodeHintType,RGBLuminanceSource,BinaryBitmap,HybridBinarizer
} from '@ohos/zxing';
import image from '@ohos.multimedia.image';export default class QRCode {constructor() {}async encode(content: string, params: {width: number,height: number,format?: BarcodeFormat}): Promise<image.PixelMap> {const {width,height,format=BarcodeFormat.QR_CODE} = paramsconst encodeHintTypeMap = new Map();// 设置二维码空白的宽度encodeHintTypeMap.set(EncodeHintType.MARGIN, 0);const writer: MultiFormatWriter = new MultiFormatWriter();let matrix: BitMatrix = writer.encode(content, format, width, height, encodeHintTypeMap);const PixelData = this.getMatrixPixelData(matrix, matrix.getWidth(), matrix.getHeight())return await image.createPixelMap(PixelData.buffer, {size: {width, height}})}async decode(image: image.PixelMap, params: {width: number,height: number,format?: BarcodeFormat}): Promise<string> {const {width,height,format=BarcodeFormat.QR_CODE} = paramslet num=image.getPixelBytesNumber()let arrayBuffer:ArrayBuffer=new ArrayBuffer(num);await image.readPixelsToBuffer(arrayBuffer)const int32Array=new Int32Array(arrayBuffer)const luminanceSource=new RGBLuminanceSource(int32Array,width,height)const binaryBitmap=new BinaryBitmap(new HybridBinarizer(luminanceSource))const reader=new MultiFormatReader()const hints=new Map();hints.set(DecodeHintType.POSSIBLE_FORMATS,[format]);reader.setHints(hints);let result=reader.decode(binaryBitmap);let text=result.getText();return text;}getMatrixPixelData(matrix, width, height) {const BLACK = 0xFF000000;const WHITE = 0xFFFFFFFF;const pixels = new Uint32Array(width * height);for (let y = 0; y < height; y++) {let offset = y * width;for (let x = 0; x < width; x++) {pixels[offset + x] = matrix.get(x, y) ? BLACK : WHITE;}}return pixels;}}

encode编码方法:根据输入的参数生成码的方法,可以通过传入不同的BarcodeFormat完成不同格式的码的生成。

decode解码方法:对image组件中图片的pixelMap,进行解码操作获取对应的码值

getMatrixPixelData:这个方法是将matrix转成PixelData,用于获取pixelMap的buffer,我们可以在这个方法中定义条码的颜色

三、使用工具类完成解析与生成

最后我们在page页中使用刚刚的方法就可以完成码的解析与生成功能。这边需要注意的是encode()和decode()方法都是耗时操作,我们使用async/await来进行异步处理操作

import { BarcodeFormat } from '@ohos/zxing';
import QRCode from '../util/QRCode'@Entry@Component
struct Index {@State message: string = 'Hello World'@State pixelMap: PixelMap = undefinedqrcode = new QRCode()async encode() {this.pixelMap = await this.qrcode.encode("this is barcode", {width: 260,height: 80,format: BarcodeFormat.CODE_128})}async decode() {try {this.message = await this.qrcode.decode(this.pixelMap, {width: 260,height: 80,format: BarcodeFormat.CODE_128})} catch (err) {console.log('[Demo] decode error:' + JSON.stringify(err));}}build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Image(this.pixelMap).width(260).height(80).margin(30)Button('生成一维码').fontSize(25).width(300).margin(20).onClick(() => {this.encode();})Button('解析一维码').fontSize(25).width(300).margin(20).onClick(() => {this.decode();})}.width('100%')}.height('100%')}}

上面代码中使用的码的格式是条码格式:BarcodeFormat.CODE_128,如果需要使用二维码也可以将这边的格式修改为:BarcodeFormat.QR_CODE

【最后】

至此我们就完成了Stage模型中条码生成与解析的基本操作,如果需要进一步自定义可以参考demo工程:OpenHarmony-TPC/zxing (gitee.com)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_331086.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【已解决】Flask项目报错TypeError: tuple indices must be integers or slices, not str

文章目录 问题情境报错及分析报错代码分析 解决方案必要的解决方法可能有用的解决方法 问题情境 本解决方案适用情境&#xff1a;在本地可以正常运行的flask项目&#xff0c;放到云服务器报错TypeError: tuple indices must be integers or slices, not str&#xff0c;即代码…

《深度学习推荐系统》笔记

目录 一、推荐系统是什么1.作用和意义2.推荐系统的架构2.1 逻辑架构2.2 技术架构 二、传统的推荐系统方法1. 协同过滤算法1.1 userCF&&ItemCF1.3 矩阵分解算法 2. 逻辑回归算法3. 因子分解机3.1 POLY2模型3.2 FM模型3.3 FFM模型3.4 小结 4. 组合模型4.1 GBDTLR组合模型…

【C++/嵌入式笔试面试八股】二、24.TCP三次握手四次挥手 | TCP可靠性

TCP三次握手四次挥手 64.TCP头部中有哪些信息?❤️ TCP数据报格式(左图) UDP数据报格式也放这(右图),不具体解释了。 结合三次握手四次挥手来看 端口: 区分应用层的不同应用进程 扩展:应用程序的端口号和应用程序所在主机的 IP 地址统称为 socket(套接字),IP:端口…

Docker安装ElasticSearch/ES

目录 前言准备拉取ElasticSearch镜像安装ElasticSearch拉取elasticsearch-head镜像安装elasticsearch-head参考 前言 TencentOS Server 3.1Docker version 19.03.14, build 5eb3275d40 准备 docker 已安装。 安装 docker 参考&#xff1a;【Centos 8】【Centos 7】安装 docke…

基于STM32 ARM+FPGA伺服控制系统总体设计方案(一)

设计需求 一套完整的伺服控制方案包括了上位机、驱控一体控制器和功率板三者。操作人员 通过上位机发送各种不同指令&#xff0c;然后控制器解析指令后执行相应的伺服功能&#xff0c;其次控 制器将驱动信号传输至功率板驱动电机&#xff0c;最后控制器采集反馈信息进行闭环…

了解PostgreSQL sql shell和VACUUM命令

从SQL Shell进入PostgreSQL&#xff1b;没用过这东西&#xff0c;看一下&#xff1b; 一直回车&#xff1b;最后输入口令就登入了&#xff1b;此时是登入默认的数据库postgres&#xff1b;这个数据库是默认安装的&#xff1b; 看一下有没有表&#xff0c;根据资料可以用 \d 或…

大坝安全监测中需要做好检查监测

大坝安全监测是人们了解大坝运行状态和安全状况的有效手段和方法。它的目的主要是了解大坝安全状况及其发展态势&#xff0c;是一个包括由获取各种环境、水文、结构、安全信息到经过识别、计算、判断等步骤&#xff0c;最终给出一个大坝安全 程度的全过程。 此过程包括&#xf…

Linux中常用的监控性能的命令(sar、mpstat,vmstat, iostat,)详解

Linux中常用的监控性能的命令有&#xff1a; sar&#xff1a;能查看CPU的平均信息&#xff0c;还能查看指定CPU的信息。与mpstat相比&#xff0c;sar能查看CPU历史信息 mpstat&#xff1a;能查看所有CPU的平均信息&#xff0c;还能查看指定CPU的信息。 与sar相比&#xff0c…

九五从零开始的运维之路(其二十)

[TOC](文章目录) 文章目录 前言一、LAMP是什么二、配置环境及安装1.配置yum源2.关闭防火墙、网络图形化工具及SElinux3.安装软件包 三、配置apache服务器内容四、启动服务五、访问验证总结 前言 本篇将简述的内容&#xff1a;Linux系统下的LAMP平台部署 基于discuz框架的论坛搭…

阿里云无影云电脑价格_企业办公型1元_云桌面入口

阿里云无影云电脑配置费用&#xff0c;4核8G企业办公型云电脑可以免费使用3个月&#xff0c;无影云电脑地域不同费用不同&#xff0c;无影云电脑是由云桌面配置、云盘、互联网访问带宽、AD Connector、桌面组共用桌面session等费用组成&#xff0c;阿里云百科分享阿里云无影云电…

中文数据下载

研究AI离不开数据&#xff0c;数据库可以说是AI的半壁天下。有链接的数据库下载是很nice的。 语音数据集整理 目录 1.Mozilla Common Voice. 2 2.翻译和口语音频的大型数据库Tatoeba. 2 3.VOiCES Dataset 3 4. LibriSpeech. 4 5.2000 HUB5 English&#xff1a;... 4 6.…

如何用Three.js + Blender打造一个web 3D展览馆

作者&#xff1a;vivo 互联网前端团队- Wei Xing 运营活动新玩法层出不穷&#xff0c;web 3D炙手可热&#xff0c;本文将一步步带大家了解如何利用Three.js和Blender来打造一个沉浸式web 3D展览馆。 一、前言 3D展览馆是什么&#xff0c;先来预览下效果&#xff1a; 看起来像…

Linux离线环境Jenkins部署SpringBoot

Jenkins服务器 把Jar包上传到Linux服务器的/jenkins/目录下 Dashboard----》新建任务----》构建一个自由风格的软件项目----》test 修改jenkins工作空间 新建构建前执行命令stop.sh&#xff0c;停止SpringBoot并备份 &#xff08;这里是目标服务器&#xff0c;即部署项目的…

激斗云计算:互联网大厂打响新一轮排位战

大模型如同一辆时代列车&#xff0c;所有科技大厂都想上车。 自去年底ChatGPT一炮而红&#xff0c;国内外数十家科技大厂、创业公司、机构相继下场&#xff0c;一时间掀起大模型的热浪。 《中国人工智能大模型地图研究报告》显示&#xff0c;截至今年5月28日&#xff0c;中国…

第八章:SegNet——一个用于强大的语义像素级标注的深度卷积编码-解码架构

0.摘要 我们提出了一种新颖的深度架构SegNet&#xff0c;用于语义像素级图像标注。SegNet具有一些吸引人的特性&#xff1a; (i)它只需要对完全学习的函数进行前向评估&#xff0c;就可以获得平滑的标签预测&#xff1b; (ii)随着深度增加&#xff0c;像素标注考虑了更大的上下…

SpringBoot+actuator和admin-UI实现监控中心

使用SpringBoot很久了&#xff0c;但是很少使用到SpringBoot的查看和监控&#xff0c;将来八成也不会用到&#xff0c;万一有机会用到呢&#xff1f;所以记录一下以前学习SpringBootactuator和adminUI实现监控中心的方式 Springboot的版本2.0.x <parent><groupId>…

keepalived安装配置详解

文章目录 高可用介绍keepalived安装、使用vip漂移抓包脑裂脑裂有没有危害&#xff1f;如果有危害对业务有什么影响&#xff1f; keepalived架构双vip架构 Healthcheck实现 notifyVRRP选举格式 高可用 介绍 高可用性&#xff08;High Availability&#xff09;是指系统或服务能…

Word2Vec实现文本识别分类

深度学习训练营之使用Word2Vec实现文本识别分类 原文链接环境介绍前言前置工作设置GPU数据查看构建数据迭代器 Word2Vec的调用生成数据批次和迭代器模型训练初始化拆分数据集并进行训练 预测 原文链接 &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&…

pycharm新建分支并提送至GitHub

文章目录 前言pycharm创建本地分支Push至远程分支 前言 当我们写的项目代码越来越多时&#xff0c;一个master分支无法满足需求了&#xff0c;这个时候就需要创建分支来管理代码。 创建分支可以快速的回滚到某个节点的版本&#xff0c;也可以多个开发者同时开发一个项目&#…

剑指oferr68-II.二叉树的最近公共祖先

为什么这道题的难度是easy&#xff0c;我感觉挺难的啊&#xff0c;我想了挺久没有一点思路就直接看题解了。题解有两种解法&#xff0c;先看第一种存储父节点 class Solution {Map<Integer,TreeNode> parent new HashMap<Integer,TreeNode>();Set<Integer>…