鸿蒙ArkTS 关于相册，二维码生成、截图保存、真机扫码、上传相册内的图片（重点），语音识别搜索功能实现

一、二维码生成

直接用QRCode组件生成二维码

scss 复制代码

 QRCode(this.item.id).width(160).height(160)

二、截图保存

关于图片我们第一时间想到的API肯定是photoAccessHelper

重点：

1.componentSnapshot截图核心API

2.image创建imagePacker实例的API

3.写入到相册fileIo/fs

4.SaveButton保存控件

使用 componentSnapshot 实现组件截图：

typescript 复制代码

import { componentSnapshot } from '@kit.ArkUI'

@Entry
@Component
struct cssPage {
 @State
 img: PixelMap | null = null

 build() {
   Column() {
     Row() {
       Button('点我截图')
         .onClick(() => {
          this.img =  componentSnapshot.getSync('myrow')
         })

       // 生成二维码组件
       QRCode('13800')
         .color(Color.Green)
         .height(200)
         .height(200)
     }
     .layoutWeight(1)
     .border({ width: 2, color: Color.Pink })
     .backgroundColor(Color.Orange)
     .width('100%')
     .id('myrow')

     Row() {
       Image(this.img)
         .width('80%')
     }
     .layoutWeight(1)
     .justifyContent(FlexAlign.Center)
     .alignItems(VerticalAlign.Center)
   }
 }
}

使用 SaveButton安全控件将截图保存到相册：

csharp 复制代码

import { image } from '@kit.ImageKit'

@State img: PixelMap
 SaveButton()
 .onClick(async () => {
      // 1. 创建ImagePacker实例，压缩后获得图片的二进制数据imgBuffer
    
      const imagePackerApi = image.createImagePacker();
      let imgBuffer = await imagePackerApi.packing(this.img, { format: 'image/jpeg', quality: 100 })
      
      // 2. 将imgBuffer写入到相册
      const context = getContext();
      let helper = photoAccessHelper.getPhotoAccessHelper(context);
      // onClick触发后10秒内通过createAsset接口创建图片文件，10秒后createAsset权限收回。
      let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpeg');
      // 使用uri打开文件，可以持续写入内容，写入过程不受时间限制
      // Logger.debug(uri)
      let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
      // 写入图片      
      fileIo.writeSync(file.fd, imgBuffer!);
      // 关闭文件
      await fileIo.close(file.fd);
      Logger.debug('图片写入成功')
}

三、真机扫码

当上面的二维码写入到相册后，就可以给朋友分享二维码帮忙砍一刀了
然后我们用app里面的相机按钮来打开摄像头扫描二维码，通过扫码到的信息（id）跳到指定页面
核心API是scanBarCode

scss 复制代码

// 1. 增加扫码图标
 Row({space:5}){
  Image($r('app.media.icon_point'))
    .width(24)
    .aspectRatio(1)
    .onClick(() => {
      this.scanQuestionCode()
    })
    .layoutWeight(1)

  HdSearch()
    .layoutWeight(3)
  HdClockIn()
    .layoutWeight(1)
}

// 2. 扫码获取题目id并跳转到详情页面
async scanQuestionCode() {
  if (canIUse('SystemCapability.Multimedia.Scan.ScanBarcode')) {
    const result = await scanBarcode.startScanForResult(getContext(this))
    if (result.originalValue) {
      try {
        router.pushUrl({
          url: 'pages/QuestionDetailPage',
          params: {
            id: result.originalValue,
          }
        })
      } catch (e) {
        promptAction.showToast({ message: '没有找到试题' })
      }
    }
  }
}

注：系统定义了API canIUse帮助开发者来判断该设备是否支持某个特定的syscap。即使是相同的系统能力，在不同的设备下，也会有能力的差异。比如同是摄像头的能力，平板设备优于智能穿戴设备。

四、上传相册内的图片

1.调起相册选择图片，配置相关的参数（一张，图片）

2.拷贝选择的图片到缓存目录

3.利用request.uploadFile 进行图片上传

在监听上传进度中我们可以通过emitter来跨线程发送数据（发布订阅）实时监听上传进度

五、语音识别

核心API是speechRecognizer，文本转语音有兴趣的可以查看我的上一篇文章