OpenHarmony 组件截图问题

Question

@润和HiHope社区

问题描述：在使用 OpenHarmony 4.0Release 的组件截图模块时碰到问题，截取的组件保存到应用沙箱后，导出到电脑桌面上无法查看。
IDE：DevEco Studio 4.0 Release，Build 4.0.0.600
SDK: OpenHarmony API 10，4.0.10.15
开发板：DAYU 200，内存8G

涉及的模块：

1. @ohos.arkui.componentSnapshot (组件截图)，API 10+，仅支持真机
   https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/apis/js-apis-arkui-componentSnapshot.md/
2. @ohos.multimedia.image (图片处理)，API 6+
   https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/apis/js-apis-image.md/
3. @ohos.file.fs (文件管理) ，API 9+
   https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/apis/js-apis-file-fs.md/

实现代码：

  async snapshotWithComponent(componentId: string, callback: Callback<string>) {
    //pixelMap to buffer.
    let pixMap = await componentSnapshot.get(componentId)
    Logger.debug(TAG, 'image info: ' + JSON.stringify(await pixMap.getImageInfo()))
    this.pixMap = pixMap
    let pixelBytesNumber: number = pixMap.getPixelBytesNumber();
    Logger.debug(TAG, 'image pixelMap bytes: ' + pixelBytesNumber)
    let buffer: ArrayBuffer = new ArrayBuffer(pixelBytesNumber);
    await pixMap.readPixelsToBuffer(buffer)
    await pixMap.release()

    //create file in sandbox
    let fileDir = getGlobalObject('sanBoxFileDir') as string
    let filePath = fileDir + '/' + componentId + Date.now() + '.jpg';
    if (!fs.accessSync(filePath)) {
      let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
      Logger.info(TAG, "file fd: " + file.fd);

      let fd = file.fd
      let writeLen = fs.writeSync(fd, buffer);
      fs.closeSync(file)
      Logger.info(TAG, "write data to file succeed and size is: " + writeLen);
      callback(filePath)
    }
  }

调用：

Text('照片').fontSize(20)
  .onClick(event => {
    this.snapshotWithComponent('page_title', (displayName: string) => {
     Logger.info(TAG, 'writeSync data to file succeeded, displayName:' + displayName);
    })
  })
  .id('page_title')

真机Log：

[ImageFileList], image info: {"size":{"width":60,"height":35},"pixelFormat":3,"colorSpace":2,"alphaType":2,"density":0}
[ImageFileList], image pixelMap bytes: 8400
[ImageFileList], file fd: 54
[ImageFileList], write data to file succeed and size is: 8400
[ImageFileList], writeSync data to file succeeded, displayName:/data/storage/el2/base/files/page_title1704867902094.jpg

真机中的应用沙箱路径中也存在该文件：

用电脑上的图片查看软件打开无法显示：

疑问：

1. 既然图片尺寸大小、颜色空间、像素格式都有，为什么像素密度为0？
2. 是接口本身的问题，还是说不应该这样实现？

请懂的小伙伴帮忙解答谢谢~

Answer 1

引自免费微信小程序：皆我百晓生

1. 像素密度为0的问题

根据你提供的代码和日志信息，可以看出在截取组件的过程中，图片的像素密度为0。这可能是由于以下几种原因：

• 错误的获取像素密度信息：你可以尝试在调用getImageInfo()方法之前，增加打印获取像素密度信息的代码，检查是否成功获取到正确的像素密度信息。如果获取到错误的像素密度信息，则可能是API对该设备的像素密度获取不支持，或者获取方法不正确。

• 组件截图模块的问题：如果确认像素密度的获取过程没有问题，那么可能是组件截图模块本身对于像素密度的处理有问题。你可以查看组件截图模块的文档或者相关源码，确定该模块是否支持正确的像素密度获取和设置。

• 可能是OpenHarmony 4.0版本的bug：如果上述方案都没有解决问题，那么很有可能是OpenHarmony 4.0版本的bug。你可以尝试升级到最新的OpenHarmony版本，并查看是否有已知的解决方案或者提交bug给OpenHarmony官方团队。

2. 接口实现的问题

根据你提供的代码，没能看出明显的问题。但是有几个地方可以进一步检查和调试：

• 文件路径的问题：你可以再次确认一下文件路径是否正确。尤其是getGlobalObject('sanBoxFileDir')返回的沙箱路径，确保能够正确创建文件和写入数据。

• 文件写入的问题：你可以尝试在写入文件之后，再次读取文件内容验证是否写入成功。可以使用文件管理模块中的相应API来实现文件的读取和内容验证。

• 文件格式的问题：你提到电脑上的图片查看软件无法显示图片，并显示“似乎不支持此文件格式”。这可能是因为文件格式不正确或者文件损坏。你可以尝试使用其他图片查看软件来打开这个文件，或者尝试使用不同的文件格式保存图片（例如.png格式）来验证是否是文件格式的问题。

如果上述方案仍无法解决问题，建议你向OpenHarmony官方社区或者官方支持团队反馈该问题，以获取更准确的解答和支持。