# 【鸿蒙开发】如何生成二维码截图保存到相册##实现分享功能

【鸿蒙开发】如何生成二维码截图保存到相册##实现分享功能

文章目录

• 【鸿蒙开发】如何生成二维码截图保存到相册##实现分享功能
• 前言
• 一、业务流程梳理
• 二、效果展示
• 三、实现代码
• • 1.静态布局
  • 2.实现截图保存相册功能
  • 3.调用保存方法
• 四、实现扫码功能
• • 1.效果展示
  • 2.实现代码

前言

本文主要介绍了一个分享功能，如何分享生成二维码截图保存到相册，涉及到的技术点有生成二维码、截图、将截图保存到相册。

一、业务流程梳理

二、效果展示

三、实现代码

1.静态布局

静态页面搭建，使用QRCode生成二维码图片，使用安全控件SaveButton获取临时的存储权限。
需要注意，安全控件不允许有任何的遮挡和不允许的样式，例如浅颜色等，否则会下载失败。

@Entry
@Component
struct Index {
  @State shareId: string = '123'
  
  build() {
    Column() {
      Column({ space: 10 }) {
        Image('https://img1.baidu.com/it/u=1908360684,1414086766&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1734282000&t=2415f668fc217d0ae8f36db3a878a0a2')
          .width(60)
          .aspectRatio(1)
          .borderRadius(30)
          .alignSelf(ItemAlign.Start)
         //生成二维码
        QRCode(this.shareId)
          .width(170)
          .aspectRatio(1)

        Row() {
          Text('来自C宝的分享')
            .fontColor(Color.Orange)
            //安全控件--下载--临时获取存储权限
          SaveButton()
            .backgroundColor(Color.Orange)
            .onClick(() => {
              
            })
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .width(250)
      .height(300)
      .backgroundColor('#fff')
      .padding(6)
      //设置id属性，后续根据id截图
      .id('share')
    }
    .width('100%')
    .height('100%')
    .padding(30)
    .backgroundColor('#ccc')
  }
}

2.实现截图保存相册功能

鸿蒙不允许应用直接访问用户相册，所以我们先要将图片写入到沙箱相册，再将图片保存到用户的相册

//保存方法
  async saveImg() {
    try {
    //截图生成像素图
      const pixelMap = await componentSnapshot.get('share')
      const imagePacker = image.createImagePacker()
      //将像素图打包成二进制数据
      const arrayBuffer = await imagePacker.packing(pixelMap, { format: 'image/jpeg', quality: 100 })
      //缓存路径
      const filePath = `${getContext().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)
      const uri = fileUri.getUriFromPath(filePath)
      const phAccessHelper = photoAccessHelper.getPhotoAccessHelper(getContext(this))
      //相册管理模块创建资源变更申请保存到相册
      const assetChangeRequest =
        photoAccessHelper.MediaAssetChangeRequest.createImageAssetRequest(getContext(this), uri)
       //提交申请
      await phAccessHelper.applyChanges(assetChangeRequest)
      promptAction.showToast({ message: '保存成功' })
    } catch (err) {
      AlertDialog.show({ message: JSON.stringify(err), alignment: DialogAlignment.Center })
    }
  }

3.调用保存方法

        Row() {
          Text('来自C宝的分享')
            .fontColor(Color.Orange)
          SaveButton()
            .backgroundColor(Color.Orange)
            .onClick((event, result) => {
              //如果授权成功
              if (result === SaveButtonOnClickResult.SUCCESS) {
                this.saveImg()
              }
            })
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)

四、实现扫码功能

1.效果展示

需要使用真机演示

2.实现代码

      Button('扫码')
        .onClick(async () => {
          //判断系统是否支持扫码能力
          if (canIUse('SystemCapability.Multimedia.Scan.ScanBarcode')) {
            const res = await scanBarcode.startScanForResult(getContext(this))
            AlertDialog.show({ message: '扫码结果' + JSON.stringify(res), alignment: DialogAlignment.Center })
          } else {
            promptAction.showToast({ message: '当前设备不支持' })
          }
        })