基于鸿蒙Next模拟扫图识物的一个过程

一、功能介绍(基础)

基于鸿蒙Next模拟扫图识物的一个过程,扫描到图片,提示出相关的图片内容,是一个什么东西。

二、使用场景(大类)

支付、社交、信息获取、在线调查、教育学习等等。

三、实现步骤:

第一步:上传图片,打开相册时,会有获取媒体权限的弹窗询问。

第二部:扫一扫,识别图片内容。

第三步:识别到的图片信息展示,用弹窗的形式展现出来

四、展示效果

预览器效果

五、代码实现

复制代码
import abilityAccessCtrl, { Permissions } from '@ohos.abilityAccessCtrl'
import picker from '@ohos.file.picker'
import common from '@ohos.app.ability.common'
import promptAction from '@ohos.promptAction'

let context = getContext(this) as common.UIAbilityContext

let permissionList: Permissions[] = [
'ohos.permission.READ_MEDIA',
'ohos.permission.MEDIA_LOCATION'
]

@Entry
@Component
struct Index {
@State img:string = "/common/images/img_up.png" //初始化图片
@State scanHeight:number = 0 // 扫描高度-都动画
@State isVisibility:boolean = false // 扫描框显隐控制

//获取本地图片路径
getLocalPicPath() {
let photoPicker = new picker.PhotoViewPicker();
photoPicker.select({
MIMEType: picker.PhotoViewMIMETypes.IMAGE_TYPE,
maxSelectNumber: 1
},
(err, photoPickerValue) => {
if (err) {
console.info("photoPicker_err:" + err.message)
return
}
console.info("photoPicker_Value:" + photoPickerValue.photoUris)
this.img = photoPickerValue.photoUris[0].toString()
}
)
}

//相册权限获取
isAuthorize() {
let AtManager = abilityAccessCtrl.createAtManager();
AtManager.requestPermissionsFromUser(context, permissionList)
.then((data) => {
console.info('request permissions from user success:' + data.authResults)
this.getLocalPicPath() //获取本地路径
})
.catch((err:Error) => {
console.info('request permissions from user failed:', JSON.stringify(err) ?? '')
});
}

六、代码结构及原理:
1.整体结构:

使用了ArkTS的装饰器语法,如@Entry和@Component。
2.状态管理:

组件使用@State装饰器定义了几个响应式状态变量,如scanHeight、isVisibility。这些变量的变化会自动触发UI的更新。
3.UI结构:

界面使用嵌套的Stack、Column和Row组件构建。主要包括图形选择、线条颜色选择、线宽调节等部分。
4.数据传递:

当点击"上传图片"按钮时,会调用isAuthorize()回调函数,先获取媒体权限,确认授权之后,在调用getLocalPicPath()回调函数,获取选择的图片。点击"扫一扫",识别上传图片内容
5.样式设置:

大量使用了链式调用来设置组件的样式,如字体大小、颜色、边距等。
6.响应式设计:

通过@State装饰器和状态变量的绑定,实现了界面的响应式更新。当用户进行操作时,相关的状态变量会更新,从而触发UI的重新渲染。

相关推荐
周胡杰31 分钟前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
脑子缺根弦2 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
迷曳11 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
呆呆的小鳄鱼14 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划
迷曳15 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
DC_BLOG16 小时前
OSPFv3中LSA参数
运维·服务器·华为·智能路由器·huawei
平谷一勺1 天前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
博睿谷IT99_1 天前
入门华为人工智能,HCIA/HCIP/HCIE该怎么选?
人工智能·华为·华为认证
江湖有缘1 天前
基于华为欧拉系统安装FileGator文件管理器
华为
小周学学学1 天前
zabbix以SNMP(V2C)监控网络设备,以华为设备为例
服务器·华为·zabbix