ScanDemo-harmony

KO | EN

gitlite — search

#hacktoberfest #typescript #android #machine-learning #linux #docker #java #windows #kubernetes #vue #pytorch #ios #openai #open-source

ScanDemo-harmony

(★ 15)

鸿蒙扫一扫组件

ScanDemo-harmony 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## 鸿蒙扫一扫组件（多码识别）

***

- 利用鸿蒙系统customScan能力，实现二维码识别
- 支持多码识别
- 支持选择图库扫码能力
- 支持开启关闭闪光灯
- 支持UI定制
- 手指撑开缩小控制镜头缩放倍数

![截屏](https://communityfile-drcn.op.hicloud.com/FileServer/getFile/cmtybbstemp/20240807/cmtybbs/752/372/949/0030086000752372949.20240807215416.41746396059467540421985835464896:20240807225417:2800:449C75883C1493F039B0F5E815B273804661C1DAE792D282CEBC4C564DBB8337.jpg)

使用示例<br>

### 单码识别

- 导入

```typescript
import { ResultState, Scanner, ScannerController, ScanUtil } from '@coner/Scanner';
```

- 使用

```typescript
scannerController: ScannerController = new ScannerController()
```

```typescript
Scanner({
  controller: this.scannerController,
  onScanResult: (code: ResultState, value: string) => {
    if (code == ResultState.Success) {
      promptAction.showToast({ message: value })
    }
  },
  onCameraReject: () => {
    promptAction.showToast({ message: '摄像头权限被拒绝' })
  }
}).layoutWeight(1)
```

### 多码识别

- 导入

```typescript
import { ProScanner, ProScannerController, ResultState } from '@coner/Scanner'
```

- 使用

```typescript
controller: ProScannerController = new ProScannerController()
```

```typescript
ProScanner({
  controller: this.controller,
  onFindMultipleCode: (result: scanBarcode.ScanResult[]) => {
    promptAction.showToast({ message: '发现了' + result.length + '个二维码' })
  },
  onScanResult: (code: ResultState, value: string) => {
    if (code == ResultState.Success) {
      promptAction.showToast({ message: value })
    }
  }
})
  .layoutWeight(1)
```

## 安装使用

***

```json
ohpm i @coner/scanner
```

## Scanner 属性

***

### ScannerController控制器

***

### 使用方法

```typescript
this.scannerController.scanUrl(url) // 扫码结果回调到Scanner组件的onScanResult回调方法
```

## ProScanner 属性-多码识别

***

### ProScannerController控制器

与ScannerController一致，此处省略

## ScanUtil

***

- 在非扫码页面（未使用Scanner组件）时调用扫描网络图片、图片uri、图片PixelMap能力

### 使用方法

```typescript
ScanUtil.scanUrl(url)
  .then((res) => {
    promptAction.showToast({ message: res })
  })
  .catch((err: string) => {
    promptAction.showToast({ message: '失败了：' + err })
  })
```

## 声明权限

entry module下的module.json5中新增如下配置

```typescript
{
  "module": {
    // ...
    'requestPermissions': [
      {
        "name": "ohos.permission.INTERNET",
      },{
        "name": "ohos.permission.CAMERA",
        "reason": "$string:reasonRequestCamera",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "inuse"
        }
      }
    ]
  }
}
```

## 单码识别自定义UI

***

```typescript
Scanner({
  cornerLineShow: false, // 隐藏四个角
  scanLineShow: false, // 隐藏扫描线
  albumsShow: false, // 隐藏图库按钮和文字
  lightShow: false, // 隐藏闪光点按钮和文字
  tipsShow: false, // 隐藏提示词
  maskColor: Color.Transparent, // 蒙层透明
  onScanResult: (code: ResultState, value: string) => {
    if (code == ResultState.Success) {
      promptAction.showToast({ message: value })
    }
  },
  onCameraReject: () => {
    promptAction.showToast({ message: '摄像头权限被拒绝' })
  }
})
```

## 多码识别自定义UI

***
调整默认的多码标志点UI

```typescript
ProScanner({
  pointViewSize: 40,
  pointViewColor: '#4AA4F9',
  pointViewBorderWidth: 3,
  pointIcon: $r('app.media.xxxxx'),
  pointIconSize: 26,
  pointViewBorderColor: Color.White,
  pointViewLeftOffset: 20,
  pointViewTopOffset: 20,
})
```

对默认样式不满意可以直接重写标志点UI

```typescript
ProScanner({
  pointView: this.PointView()
})
```

```typescript
@Builder
PointView() {
  // 自定义UI样式
}
```

## 可能遇到的问题
***
### 扫码识别不了、扫码识别没反应
请设置disableCheckArea参数为true。<br>
disableCheckArea参数说明：是否禁止检查二维码在框中。<br>
可能是二维码不完全在扫码框中，或因为屏幕尺寸问题导致计算得到的二维码位置未在扫码框中。

### 二维码是微信小程序码
微信小程序码只能被微信识别，组件识别不了属于正常表现。

### 图像变形
组件初始化时根据实际要求设置defaultWidth、defaultHeight的值，不要求精准，主要用于视频流的宽高比。

## 感谢支持

ScanDemo-harmony

ScanDemo-harmony 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

ScanDemo-harmony

ScanDemo-harmony 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README