组件截图怎么保存将pixelMap存储到系统相册或应用沙箱

组件截图怎么保存将pixelMap存储到系统相册或应用沙箱

HarmonyOS
2024-07-22 12:31:47
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
jshyb

步骤一:确认功能需要使用的能力为组件截图能力:componentSnapshot

截图能力有窗口截图能力 window.snapshot()和 组件截图能力@ohos.arkui.componentSnapshot。不同的能力范围根据业务选择合适的PAI 解决问题。

步骤二:应用授权以及配置

保存到系统相册需要 申请相册管理模块权限'ohos.permission.WRITE_IMAGEVIDEO'module.json5 配置权限

"requestPermissions": [ 
  { 
    "name": "ohos.permission.WRITE_IMAGEVIDEO", 
    "reason": "$string:reason", 
    "usedScene": { 
      "abilities": [ 
        "EntryFormAbility" 
      ], 
      "when": "inuse" 
    } 
  }, 
]

页面入口获取权限

import { abilityAccessCtrl, common, Permissions } from '@kit.AbilityKit'; 
const permissions: Array<Permissions> = ['ohos.permission.WRITE_IMAGEVIDEO']; 
 
function reqPermissionsFromUser(permissions: Array<Permissions>, context: common.UIAbilityContext): void { 
  let atManager: abilityAccessCtrl.AtManager = 
    abilityAccessCtrl.createAtManager(); 
  // requestPermissionsFromUser会判断权限的授权状态来决定是否唤起弹窗 
  atManager.requestPermissionsFromUser(context, permissions).then((data) => { 
    let grantStatus: Array<number> = data.authResults; 
    let length: number = grantStatus.length; 
    for (let i = 0; i < length; i++) { 
      if (grantStatus[i] === 0) { 
        // 用户授权,可以继续访问目标操作 
      } else { 
        // 用户拒绝授权,提示用户必须授权才能访问当前页面的功能,并引导用户到系统设置中打开相应的权限 
        return; 
      } 
    } 
    // 授权成功 
  }).catch((err: BusinessError) => { 
    console.error(`Failed to request permissions from user. Code is ${err.code}, message is ${err.message}`); 
  }) 
} 
 
aboutToAppear(): void { 
  reqPermissionsFromUser(permissions, this.context) 
}

步骤三:调用组件截图获取 pixelMap

/* 组件截图 */ 
clickToComponentSnapshot() { 
  // root 为组件ID 
  componentSnapshot.get("root", (error: Error, pixmap: image.PixelMap) => { 
    if (error) { 
      console.log("error: " + JSON.stringify(error)) 
      return; 
    } 
    console.log('截图成功') 
    this.pixmap = pixmap 
  }) 
}

步骤四:保存到系统相册或者应用沙箱

// 保存到系统相册 
async savePixmap2SysHelper() { 
  if (!this.pixmap) { 
    return 
  } 
  const imgBuffer = await this.transferPixelMap2Buffer(this.pixmap) 
 
  /*  获取相册管理模块的实例,用于访问和修改相册中的媒体文件。 */ 
  let helper = photoAccessHelper.getPhotoAccessHelper(getContext(this)) 
 
  /* 指定待创建的文件类型和后缀,创建图片或视频资源,使用callback方式返回结果。 */ 
  const uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png') 
  const file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE) 
  await fs.write(file.fd, imgBuffer) 
  /* 关闭文件 */ 
  await fs.close(file.fd) 
} 
 
/* 将 pixelMap 转成图片格式 */ 
transferPixelMap2Buffer(pixelMap: image.PixelMap): Promise<ArrayBuffer> { 
  return new Promise((resolve, reject) => { 
    /** 
     设置打包参数 
     format:图片打包格式,只支持 jpg 和 webp 
     quality:JPEG 编码输出图片质量 
     bufferSize:图片大小,默认 10M 
   */ 
    let packOpts: image.PackingOption = { format: "image/jpeg", quality: 98 } 
    // 创建ImagePacker实例 
    const imagePackerApi = image.createImagePacker() 
    imagePackerApi.packing(pixelMap, packOpts).then((buffer: ArrayBuffer) => { 
      resolve(buffer) 
    }).catch((err: BusinessError) => { 
      reject() 
    }) 
  }) 
} 
 
/* 保存到应用沙箱 */ 
async savePixmal2SystemFileManager() { 
  if (!this.pixmap) { 
    return 
  } 
  const imgBuffer = await this.transferPixelMap2Buffer(this.pixmap) 
  const file = 
    fs.openSync(this.filesDir + `/${DateUtil.getTimeStamp()}.png`, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE); 
  await fs.write(file.fd, imgBuffer) 
  /* 关闭文件 */ 
  await fs.close(file.fd) 
}
分享
微博
QQ
微信
回复
2024-07-22 20:14:36
相关问题
HarmonyOS如何PixelMap保存相册
345浏览 • 1回复 待解决
HarmonyOS保存图片系统相册问题咨询
448浏览 • 1回复 待解决
如何PixelMap的数据存储数据库中
1703浏览 • 1回复 待解决
应用组件截图保存到用户文件
813浏览 • 1回复 待解决
鸿蒙开发保存页面相册
6174浏览 • 1回复 待解决
如何保存网络图片相册
529浏览 • 1回复 待解决
如何保存本地图片相册
746浏览 • 1回复 待解决
求大佬告知如何保存图片相册
899浏览 • 1回复 待解决
PixelMap怎么保存成图片文件
246浏览 • 1回复 待解决
如何视频保存相册以及主机端
5331浏览 • 1回复 待解决
如何保存一张PNG图片相册
1667浏览 • 1回复 待解决
应用沙箱下的图片保存到图库
905浏览 • 1回复 待解决
有谁知道如何图片保存相册
787浏览 • 1回复 待解决
怎么把视频保存相册以及主机端?
3675浏览 • 1回复 待解决