HM-二维码生成、保存、扫码

二维码生成、保存、扫码

业务需求和目标：

点击按钮–>生成二维码–>点击保存–>实现二维码保存到相册–>实现二维码扫码

前置知识点：

1. QRCode – > 二维码生成组件
2. componentSnapshot –> componentSnapshot.getSync –> 组件截图模块
3. ImagePacker –> image.createImagePacker –> 图片打包器
4. fileIo –> fileIo.openSync | fileIo.writeSync | fileIo.closeSync –> 文件管理模块
5. fileUri –> fileUri.getUriFromPath –> 文件URI 模块
6. photoAccessHelper –> .getPhotoAccessHelper | .MediaAssetChangeRequest |.applyChanges –> 相册管理模块
7. canIUse –> 系统能力
8. scanBarcode –> scanBarcode.startScanForResult –>默认扫码模块

业务实现流程

代码实现：

// 掌握：二维码组件
import { componentSnapshot, promptAction } from '@kit.ArkUI'
import image from '@ohos.multimedia.image'
import { fileIo, fileUri } from '@kit.CoreFileKit'
import { photoAccessHelper } from '@kit.MediaLibraryKit'
import scanBarcode from '@hms.core.scan.scanBarcode'

// 掌握：如何给组件截图
// 截图后将图片保存到相册
// 1. PixelMap格式数据转化为二进制数据
// 2. 通过 fileIo 将二进制数据写入到缓存目录
// 3. 再从缓存目录下载到相册

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

  build() {
    Column() {
      Row() {
        Button('点我截图')
          .onClick(() => {
            // 获取指定Id组件的组件截图，返回PixelMap类型数据
            this.img = componentSnapshot.getSync('QRCode')
          })
        QRCode('http://www.baidu.com')
          .id('QRCode')
      }
      .layoutWeight(1)
      .border({ width: 2, color: Color.Pink })
      .backgroundColor(Color.Orange)
      .width('100%')


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

      SaveButton()
        .onClick(async () => {
          // TODO  转换像素图片
          // 创建图片打包控制器
          const Packer = image.createImagePacker()
          // 将PixelMap像素类型数据转换为图片数据类型，其返回的是一个二进制的数据类型
          const arrayBuffer = await Packer.packing(this.img, { format: 'image/jpeg', quality: 98 })

          // TODO 将二进制图片数据保存到缓存
          // 获取上下文，并拼接一个要保存到的文件路径
          const context = getContext(this)
          const filePath = `${context.cacheDir}/${Date.now()}.jpeg`

          // 以创建、读写的模式打开缓存目录路径
          const file = fileIo.openSync(filePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE)

          // 将二进制数据写入缓存目录文件
          fileIo.writeSync(file.fd, arrayBuffer!)
          // 关闭文件
          fileIo.closeSync(file.fd)

          // TODO 将缓存文件保存到图库
          try {
            // 1. 获取完成uri路径 (uri  统一资源标志符)
            let uri = fileUri.getUriFromPath(filePath) // 拼接完整的uri路径， 在前面加上  协议:app名称
            // 2. 创建一个相册模块实例对象
            const phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context)
            // 3. 使用相册管理模块，通过指定的uri路径，复制图片文件创建到到相册图片文件中
            const assetChangeRequest = photoAccessHelper.MediaAssetChangeRequest.createImageAssetRequest(context, uri)

            // 4. 通过相册实例提交创建图片请求
            await phAccessHelper.applyChanges(assetChangeRequest);
            promptAction.showToast({ message: '保存成功' })
          } catch (err) {
            AlertDialog.show({ message: JSON.stringify(err, null, 2), alignment: DialogAlignment.Center })
          }


        })

      Button('扫码')
        .onClick(async () => {
          // 当开发app，需要适配多端的时候，某一端可能存在无扫码功能，要进行判断
          if (canIUse('SystemCapability.Multimedia.Scan.ScanBarcode')) {
            const res = await scanBarcode.startScanForResult(getContext(this))
            AlertDialog.show({ message: JSON.stringify(res, null, 2), alignment: DialogAlignment.Center })
          } else {
            promptAction.showToast({ message: '当前设备不支持' })
          }

        })

    }
  }
}